JqueryUI Drag:光标与可拖动元素不在同一位置
Posted
技术标签:
【中文标题】JqueryUI Drag:光标与可拖动元素不在同一位置【英文标题】:JqueryUI Drag: Cursor not at the same position as draggable element 【发布时间】:2013-10-28 01:16:04 【问题描述】:我正在使用最新版本的 JQuery 和 JQuery UI 来了解拖放功能。我面临一个小问题 - 主要是由于鼠标拖动。
如您所见,我正在创建包含一些项目的堆栈。
现在,如果这些堆栈只是在 body 中 - 我的意思是 div.allstacks 在 身体没有问题。但是一旦我把所有这些堆栈都放进去 一个div#left-panel,光标失去焦点的问题就开始了。
这意味着现在当我在水平滚动后拖动项目时 - 我的鼠标 光标不在可拖动笔记的同一位置。
现在问题来了:
JSFiddle 链接 [不使用 div#left-panel 工作]: http://jsfiddle.net/deveshz/YvmFf/
JSFiddle 链接 [不使用 div#left-panel] http://jsfiddle.net/deveshz/YvmFf/1/
这里是代码。
var zindex = 10;
$(".item").draggable(
containment: "body",
scroll: true,
revert: function (event, ui)
$(this).css("border", "none");
return !event;
,
start: function (event, ui)
$(this).css("z-index", zindex++);
$(this).css("border", "2px solid #333");
);
$(".stack_items").droppable(
hoverClass: "over",
drop: function (event, ui)
$("<li class='item'></li>").html(ui.draggable.html()).appendTo(this);
$(ui.draggable).remove();
);
【问题讨论】:
嗨,Devesh,这是 jQuery UI 中的一个(5 年前的)错误,所有可能的修复都可以在这里找到:***.com/questions/5791886/…。 谢谢。会彻底看看! 【参考方案1】:当我尝试并阅读@konrad 提供的链接时,我发现它是 Jquery UI 中的一个错误——即使在它的最新版本中也是如此。开始使用 Jquery UI 1.9.2 版本后问题就解决了
这是更新后的小提琴:http://jsfiddle.net/deveshz/YvmFf/2/
使用相同的代码:
var zindex = 10;
$(".item").draggable(
containment: "body",
scroll: true,
revert: function (event, ui)
$(this).css("border", "none");
return !event;
,
start: function (event, ui)
$(this).css("z-index", zindex++);
$(this).css("border", "2px solid #333");
);
$(".stack_items").droppable(
hoverClass: "over",
drop: function (event, ui)
$("<li class='item'></li>").html(ui.draggable.html()).appendTo(this);
$(ui.draggable).remove();
);
它使用来自http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js的Jquery 1.9.2版
【讨论】:
您是否找到问题的根源以及该解决方案如何解决您的问题?能不能给个简单的解释以上是关于JqueryUI Drag:光标与可拖动元素不在同一位置的主要内容,如果未能解决你的问题,请参考以下文章
HTML5 Drag & Drop 在拖动时更改光标(不要使用 UI)