我正在尝试使div可移动。div 具有子div 元素。你可以在这里查看jsfiddle:http://jsfiddle.net/TsW5F/2/
我只希望容器(大多数div)是可移动的。目前,内部文本可以在没有外部div 的情况下移动。最外层的容器div 应始终与其他子元素一起移动。
<div id="id">
<div>second div</div>
<div>third element</div>
</div>
$(document).ready(function() {
var $dragging = null;
$(document.body).on("mousemove", function(e) {
if ($dragging) {
$dragging.offset({
top: e.pageY,
left: e.pageX
});
}
});
$('#id').on("mousedown", null , function (e) {
$dragging = $(e.target);
});
$(document.body).on("mouseup", function (e) {
$dragging = null;
});
});
问题是行$dragging = $(e.target);
,而是使用$dragging = $(this);
$(document).ready(function () {
var $dragging = null;
$(document.body).on("mousemove", function (e) {
if ($dragging) {
$dragging.offset({
top: e.pageY,
left: e.pageX
});
}
});
$('#id').on("mousedown", null, function (e) {
$dragging = $(this);
});
$(document.body).on("mouseup", function (e) {
$dragging = null;
});
});
演示:小提琴
只需检查拖动开始,它实际上是父div:
http://jsfiddle.net/TsW5F/4/
$('#id').on("mousedown", null , function (e) {
if ($('#id').is(e.target))
{
$dragging = $(e.target);
}
});
正如 Arun P Johny 在 $(this) 之后指出的那样,将给出 JQuery 目标而不是鼠标目标。这意味着$dragging = $(this)
更整洁、更简单。