[英]JqueryUI Drag: Cursor not at the same position as draggable element
我正在使用最新版本的JQuery和JQuery UI來理解拖放功能。 我面臨一個小問題 - 主要是由於鼠標阻力。
正如您所看到的,我正在創建包含一些項目的堆棧。
現在,如果這些堆棧只是在體內 - 我的意思是div.allstacks在體內是沒有問題的。 但是一旦我將所有這些堆棧放在div#left-panel中,光標失去焦點的問題就開始了。
這意味着現在當我拖動項目時,水平滾動后 - 我的鼠標光標不在可拖動音符的相同位置。
現在問題是:
JSFiddle Link [無div工作#左側面板]: http : //jsfiddle.net/deveshz/YvmFf/
JSFiddle Link [不使用div#left-panel] http://jsfiddle.net/deveshz/YvmFf/1/
這是代碼。
使用Javascript:
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();
}
});
當我嘗試並閱讀@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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.