簡體   English   中英

JqueryUI Drag:Cursor與draggable元素不在同一位置

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM