Drag and drop JavaScript query
<script type="text/javascript">
//mouse down on dragged DIV element
var flag = 0;
function startdrag(t, e) {
if (e.preventDefault) e.preventDefault(); //line for IE compatibility
e.cancelBubble = true;
t.style.position = "absolute&q开发者_开发问答uot;;
window.document.onmousemove = dodrag;
document.getElementById("resulttable").onmouseup = end;
window.document.onmouseup = stopdrag;
window.document.s = t;
return false;
}
//move the DIV
function dodrag(e) {
//alert("dodrag");
if (!e) e = event; //line for IE compatibility
t = window.document.s;
if (t != null) {
t.style.left = (t.offsetLeft + e.clientX - t.dragX) + "px";
posleft = (t.offsetLeft + e.clientX - t.dragX) + "px";
t.style.top = (t.offsetTop + e.clientY - t.dragY) + "px";
t.dragX = e.clientX;
t.dragY = e.clientY;
}
return false;
}
//restore event-handlers
function stopdrag(e) {
if (flag == 1)
window.document.s = null;
else
alert("outside valid range"); // code for setting object to original area
return false;
}
function end(e) {
flag = 1;
return false;
}
</script>
// table from where we start dragging
<td id="<%= i %>"><div onmousedown="startdrag(this, event);"> <%Response.Write(row1[i].ToString()); %></div> </td>
// target div where to put element
<div id="resulttable" onmouseup="end(event);" >Put whatever you want in here<br />
<br />
<br />
<br />
</div>
PROBLEM:
- When I start dragging, all statements of
startdrag()
are called and thendodrag()
and so on. end()
is not called even though we put element on target div, soflag
remains as 0.
As per my comment, if you can use Jquery UI and Jquery as it will do all the heavy lifting.
With regards to your question try end() stopdrag(), javascript can work very differently across browsers, check in another browser to see if the call actually works... console.debug("method called"); is a good command to add to your code to help with debugging...
精彩评论