使用javascript可拖動DIV

我想使Draggable div 我知道這可以使用Jquery插件來完成，但我不想使用，因爲我只需要拖動功能。所以我怎麼能做出拖拽功能我已經這樣做使用javascript可拖動DIV

$(document).ready(function(e){ 
       $("#eve").mousemove(function(e){ 
        var p=$(this); 
        var offset = p.offset(); 
        var ol=offset.left; 
        var ot=offset.top; 
        var l=e.pageX-ol; 
        var t=e.pageY-ot; 
        var eX=e.pageX; 
        var eY=e.pageY; 
        var htm="left:"+ol+" top:"+ot+"<br/>"; 
        htm+="eX:"+eX+" eY:"+eY+"<br/>"; 
        htm+="curX:"+l+" curY:"+t+"<br/>"; 
        htm+="l:"+(ol-l)+" t:"+(ot-t); 
        p.html(htm); 
        p.css({left:((eX-3))+"px",top:((eY-3))+"px"}); 
       });

來源

2012-06-05 Chetan Patel

什麼是你的代碼嗎？ HTML的外觀如何？ – powtac

html中有一個DIV –

您只能使用jQuery UI的可拖動組件？沒有必要下載整個jQuery UI來使用拖拽，看起來你可以在下載頁面上選擇你想要的組件。 – Aeolun

您需要定義多個函數來處理mousedown事件開始拖動，mouseup停止draging，並適當mousemove處理的同時拖動動作，檢查這個要點我發現https://gist.github.com/1330150

來源

2012-06-05 12:06:09 Valerij

如何將此功能應用於我的元素？ –

檢查使用部分 - 要點的前5行 – Valerij

好的，謝謝這是工作 –

這是我的快即興創作。也許這正是你正在尋找的。

$("div").on({ 
    mousemove: function(e) { 
     var el = $(this); 
     var data = el.data("down"); 
     if (data) { 
      el.css({ 
       left: e.pageX - data.left, 
       top: e.pageY - data.top 
      }); 
     } 
    }, 
    mousedown: function(e) { 
     var el = $(this); 
     var pos = el.offset(); 
     el.data("down", { 
      left: e.pageX - pos.left, 
      top: e.pageY - pos.top 
     }); 
    }, 
    mouseup: function() { 
     $(this).data("down", false); 
    } 
});

DEMO：http://jsfiddle.net/UBKBb/

來源

2012-06-05 12:16:43 VisioN

使用javascript可拖動DIV

回答

相關問題