0

以下のコードは、img をドラッグ可能にしようとしています (これに関して)。動作しますが、img がすべてのラップdrag_wpを一緒に移動する場合、どうすればよいかわかりません。http://jsfiddle.net/cAeKG/8/何か提案はありますか?

js

function enableDraggin(el){
    var dragging = dragging || false, x, y, ox, oy, current;
    el.onmousedown = function(e){
        e.preventDefault();
        current = e.target;
        dragging = true;
        x = e.clientX;
        y = e.clientY;
        ox = current.offsetLeft;
        oy = current.offsetTop;
        window.onmousemove = function(e) {
            if (dragging == true) {
                var sx = e.clientX - x + ox,
                sy = e.clientY - y + oy;
                current.style.left = sx + "px";
                current.style.top = sy + "px";
                return false;
            }
        };
        window.onmouseup = function(e) {
            dragging && (dragging = false);
        };
    };
};
var el = $('.drag_wp');
for(var i = 0; i < el.length; i++){
    enableDragging(el[i]);
};

html & css

<div class="drag_wp">
    <img src="..." class="drag_el">
    <div></div>
    ....// other div
</div>
.drag_wp{
    position: absolute;
    width: auto;
    height: auto;
    background:red;
}
.drag_el{
    position: absolute;
    width: 200px;
    height: auto;
}
4

2 に答える 2

1 
function enableDraggin(el){
    var dragging = dragging || false, x, y, ox, oy, current;
    el.onmousedown = function(e){
        e.preventDefault();
        current = e.target;
        //just add this
        if(!$(current).hasClass(".drag_wp"))
             current = $(current).closest(".drag_wp")[0];
        //just add this
        dragging = true;
        x = e.clientX;
        y = e.clientY;
        ox = current.offsetLeft;
        oy = current.offsetTop;
        window.onmousemove = function(e) {
            if (dragging == true) {
                var sx = e.clientX - x + ox,
                sy = e.clientY - y + oy;
                current.style.left = sx + "px";
                current.style.top = sy + "px";
                return false;
            }
        };
        window.onmouseup = function(e) {
            dragging && (dragging = false);
        };
    };
};

e.targetクリックされた要素を返します (ほとんどの場合、HTML の画像)。class がない場合は.drag_wp、そのクラスに最も近い親を見つけて、現在のものとして使用します。

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

また、すでに jquery を使用しているため、jQuery UI から対応するプラグインを使用することをお勧めします: http://jqueryui.com/draggable/

于 2013-01-29T09:17:29.663 に答える
1

私はあなたのコードにいくつかの変更を加えました:

function enableDragging(el) {
    var dragging = dragging || false,
        x, y, ox, oy, current;
    el.onmousedown = function (e) {
        e.preventDefault();
        current = e.target.parentNode; // <--- current should be wrapper, not image
        dragging = true;
        x = e.clientX;
        y = e.clientY;
        ox = current.offsetLeft;
        oy = current.offsetTop;
        window.onmousemove = function (e) {
            if (dragging == true) {
                var sx = e.clientX - x + ox,
                    sy = e.clientY - y + oy;
                current.style.left = sx + "px";
                current.style.top = sy + "px";
                return false;
            }
        };
        window.onmouseup = function (e) {
            dragging && (dragging = false);
        };
    };
};

http://jsfiddle.net/cAeKG/9/

于 2013-01-29T09:21:24.647 に答える