3

Draggable div を作成したいのですが、Jquery プラグインを使用してこれを実行できることはわかっていますが、ドラッグ可能な機能だけが必要なため、使用したくありません。どうすればドラッグ可能な関数を作成できますか

$(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"});
                });
4

2 に答える 2

5

これが私の即興演奏です。多分これはまさにあなたが探しているものです。

$("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);
    }
});​

デモ: http://jsfiddle.net/UBKBb/

于 2012-06-05T12:16:43.573 に答える
0

ドラッグを開始し、ドラッグを停止し、ドラッグ中の動きを処理するのに適切なmousedownイベントを処理するには、複数の関数を定義する必要があります。https ://gist.github.com/1330150mouseupmousemove

于 2012-06-05T12:06:09.897 に答える