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.

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.

Now here is the problem:

JSFiddle Link [Working without div#left-panel]: /

JSFiddle Link [NOT Working with div#left-panel] /

---

Here is the code.

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();
    }
});

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.

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.

Now here is the problem:

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

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

---

Here is the code.

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();
    }
});

• javascript
• jquery
• css
• jquery-ui
• jquery-ui-draggable

Share Improve this question Follow asked Oct 19, 2013 at 4:45 Devesh KumarDevesh Kumar 1,01911 gold badge1717 silver badges2929 bronze badges 2

• 2 Hi Devesh, it's a (5 year old) bug in jQuery UI, all possible fixes are available here: stackoverflow./questions/5791886/…. – Konrad Dzwinel Commented Oct 19, 2013 at 19:24
• Thanks. Will have a thorough look! – Devesh Kumar Commented Oct 20, 2013 at 1:27

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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

here is the updated fiddle: http://jsfiddle/deveshz/YvmFf/2/

with same code:

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();
    }
});

It uses Jquery version 1.9.2 from http://cdnjs.cloudflare./ajax/libs/jqueryui/1.9.2/jquery-ui.min.js