JqueryUI Drag：光标不在与draggable元素相同的位置 [英] JqueryUI Drag: Cursor not at the same position as draggable element

问题描述

我使用最新版本的JQuery和JQuery UI来了解拖放功能。我面临一个小问题 - 主要是由于鼠标拖动。

I am using the latest version of JQuery and JQuery UI to understand drag and drop features. I am facing a minor problem - mostly due to mouse drag.

正如你可以看到，我创建堆栈与其中的一些项目。

As you can see that I am creating stacks with some items in it.

现在如果这些堆栈只是在body - 我的意思是div.allstacks是在
身体没有问题。但是，一旦我把所有这些堆栈在
a div＃左面板内，游标失去焦点的问题开始。

Now if these stacks are just inside body - I mean div.allstacks is in body there is no problem. But as soon as I put all these stacks inside a div#left-panel, the problem of cursor losing focus starts.

这意味着现在当我拖动项目，水平滚动后 - 我的鼠标
光标不在可拖动注释的相同位置。

This means now when I drag an item, after horizontal scroll - My mouse cursor is not at the same position of draggable note.

问题：

JSFiddle链接[Working without div＃left-panel]：
http://jsfiddle.net/deveshz/YvmFf/

JSFiddle Link [Working without div#left-panel]: http://jsfiddle.net/deveshz/YvmFf/

JSFiddle链接[ div＃left-panel]
http://jsfiddle.net/deveshz/YvmFf/1 /

JSFiddle Link [NOT Working with div#left-panel] http://jsfiddle.net/deveshz/YvmFf/1/

以下是代码。

Javascript：

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，我发现它的一个bug在Jquery UI - 即使在它的最新版本。一旦我开始使用Jquery UI 1.9.2版本

As I tried out and read through the link given by @konrad, I found that its a bug in Jquery UI - even in the latest version of it. The problem got solved as soon as I started using Jquery UI 1.9.2 version

这里是更新的小提琴解决问题： http://jsfiddle.net/deveshz/YvmFf/2/

here is the updated fiddle: 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

这篇关于JqueryUI Drag：光标不在与draggable元素相同的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！