JqueryUI拖動：光標與拖動元素不在同一位置

我使用最新版本的JQuery和JQuery UI來了解拖放功能。我面臨一個小問題 - 主要是由於鼠標拖動。JqueryUI拖動：光標與拖動元素不在同一位置

正如你所看到的，我正在創建堆棧中的一些項目。

現在，如果這些堆棧只是在體內 - 我的意思是div.allstacks是在身體沒有問題。但是，只要我將所有這些堆棧放在 div＃左側面板中，就會開始丟失焦點。

這意味着現在當我拖動一個項目後，水平滾動 - 我的鼠標光標不在可拖動的音符相同的位置。

現在，這裏的問題是：

Screenshot of the problem

的jsfiddle鏈接[未經DIV＃左面板工作]： http://jsfiddle.net/deveshz/YvmFf/

的jsfiddle鏈接[用DIV＃不工作左面板] 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(); 
    } 
});

來源

2013-10-19 Devesh Kumar

嗨Devesh，這是一個（5歲）在jQuery UI中的錯誤，所有可能的修補程序可在這裏：http://stackoverflow.com/questions/5791886/jquery-draggable-shows-helper-in-wrong-佈局時，滾動下頁。 –

謝謝。將有一個徹底的眼光！ –

當我嘗試了，並通過@konrad給出的鏈接閱讀，我發現它使用jQuery UI的錯誤 - 即使是在它的最新版本。 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(); 
    } 
});

它使用jQuery的版本1.9.2從我開始使用jQuery UI的1.9.2版本

這裏更新的提琴的問題得到了解決儘快爲http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js

來源

2013-10-20 11:37:20

您是否找到問題的根源以及該解決方案如何解決您的問題？你能給一些簡單的解釋嗎？ – Amerrnath

JqueryUI拖動：光標與拖動元素不在同一位置

回答

相關問題