开发者

Drag and drop JavaScript query

开发者 https://www.devze.com 2023-02-25 22:17 出处:网络
<script type="text/javascript"> //mouse down on dragged DIV element var flag = 0; function startdrag(t, e) {
<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:

  1. When I start dragging, all statements of startdrag() are called and then dodrag() and so on.
  2. end() is not called even though we put element on target div, so flag 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...

0

精彩评论

暂无评论...
验证码 换一张
取 消