Question

关于jquery多个层拖拽问题，如下代码

jQuery(function() {
var _move = false;
var _x, _y;
jQuery(".drag").mousedown(function(e) {
_move = true;
_x = e.pageX - parseInt(jQuery(".drag").css("left"));
_y = e.pageY - parseInt(jQuery(".drag").css("top"));
jQuery(".drag").fadeTo(20, 0.5);
});
jQuery(".drag").mousemove(function(e) {
if (_move) {
var x = e.pageX - _x;
var y = e.pageY - _y;
jQuery(".drag").css({ top: y, left: x });
}
}).mouseup(function() {
_move = false;
jQuery(".drag").fadeTo("fast", 1);
jQuery('.drag').css('color','red').html("top:"+ jQuery('.drag').css('top')+","+"left:"+jQuery('.drag').css('left'));
});
});

<div id="id1" class="drag"></div><div id="id2" class="drag"></div>

<div id="id3" class="drag"></div><div id="id4" class="drag"></div>

问题：现在点击一个层，但四个层都同时被拖拽，我只想要当前点击的层被拖拽，如何实现？而且我不止有4个层，很多层，不要每个div都复写jquery拖拽代码，急，坐等，追加分

Answer 1

试试这样

试试这样

1将内部的 jQuery(".drag").

改为 $(this).

jQuery(function() {
    var _move = false;
    var _x, _y;
    jQuery(".drag").mousedown(function(e) {
         _move = true;
         _x = e.pageX - parseInt($(this).css("left"));
         _y = e.pageY - parseInt($(this).css("top"));
         jQuery(".drag").fadeTo(20, 0.5);
         return false;
    });
     jQuery(".drag").mousemove(function(e) {
         if (_move) {
             var x = e.pageX - _x;
            var y = e.pageY - _y;
             $(this).css({ top: y, left: x });
        }
         return false;
     }).mouseup(function() {
         _move = false;
         $(this).fadeTo("fast", 1);
         $(this).css('color','red').html("top:"+ $(this).css('top')+","+"left:"+$(this).css('left'));
         return false;
    });
});

追问

你加的return false;这句有什么用的？

追答

用作事件停止传递

Answer 2

改为

jQuery(function() {
var _move = false;
var _x, _y;
jQuery(".drag").mousedown(function(e) {
_move = true;
_x = e.pageX - parseInt(jQuery(this).css("left"));
_y = e.pageY - parseInt(jQuery(this).css("top"));
jQuery(".drag").fadeTo(20, 0.5);
});
jQuery(".drag").mousemove(function(e) {
if (_move) {
var x = e.pageX - _x;
var y = e.pageY - _y;
jQuery(".drag").css({ top: y, left: x });
}
}).mouseup(function() {
_move = false;
jQuery(this).fadeTo("fast", 1);
jQuery(this).css('color','red').html("top:"+ jQuery(this).css('top')+","+"left:"+jQuery(this).css('left'));
});
});

<div id="id1" class="drag"></div><div id="id2" class="drag"></div>

<div id="id3" class="drag"></div><div id="id4" class="drag"></div>

Answer 3

为什么不用jQuery ui 呢？它可以方便的实现你所说的功能，无论多少个层，寥寥几行代码就能搞定，任何层随意拖拽

<script type="text/javascript" src="jquery-ui-1.9.2.custom/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="jquery-ui-1.9.2.custom/js
/jquery-ui-1.9.2.custom.min.js"></script>

引入以上两个js文件，
$(function(){
$('#draggable .drag').draggable({
cursor:"pointer" //设置拖动时鼠标指针为手形
});
});

</script>
<div id="draggable">
<div class="drag">asdfsf</div>
<div class="drag">asdf</div>
<div class="drag">dddddd</div>
<div class="drag">dddd</div>
</div>

追问

谢谢，楼下的给出了，还是多谢你的解答，又要接触jQuery ui有点乱了