CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-ui
zuc0001
zuc0001

Reputation: 931

jQuery draggable bug (element not in line with cursor)

EDIT: JSFIDDLE: http://jsfiddle.net/h9yzsqfr/

-- Code:

elem.editor.find("div.ui-widget").draggable(
{
    handle:"div.content",
    containment:elem.editor,
    snap:"*",
    start: function(e,ui)
    {
        $(ui.helper).addClass("dragging");
    },
    drag: function(e,ui)
    {
        checkTop(ui);
        if($(ui.helper).parents("div.lo-content").length > 0)
        {
            $(ui.helper).appendTo(elem.editor);
            ui.position = { 'top': e.pageY, 'left': e.pageX };
        }
    },
    stop: function(e,ui)
    {
        oldWidget.saveState($(ui.helper),1);
        setTimeout(function() {
            $(ui.helper).removeClass("dragging");
        }, 300);
    }
});

I have some draggable objects within a container defined by elem.editor; however I have some other draggable objects inside div.lo-content which is also inside elem.editor.

Whenever an object inside div.lo-content is dragged, it should reattach to the elem.editor container which is working fine; however as demonstrated in the following GIF (below), it is not setting the position of the draggable object to where the mouse cursor is.

What is a workaround for this problem?

problem

Upvotes: 2

Views: 2816

Answers (5)

Vitalicus
Vitalicus

Reputation: 1379

I removed position:absolute on dragable object

Upvotes: 0

Clint Clinton
Clint Clinton

Reputation: 724

I had the same problem. This is caused by the use of margins to center elements. Try using position absolute!

Upvotes: 0

Michelle Diniz
Michelle Diniz

Reputation: 81

Use cursorAt: top:, left: and appendTo: 'body' See my answer with example here.

jQuery draggable shows helper in wrong place after page scrolled

Upvotes: 0

Julien Grégoire
Julien Grégoire

Reputation: 17114

The problem is your width: 100% and the containment option. As soon as its appended to body it stays 100%, but of the body, then it gets smaller but the containment has already been calculated. One way to solve it is to reset containment. There are probably different ways to do it, one way could be like this:

start: function (e, ui) {

    if ($(this).parents(".inner").length > 0) {

        $(ui.helper).addClass("dragging");
        ui.helper.css({
            'width': '100px',
                'left': '0px',
                'top': '0px'
        });

        ui.helper.data()['ui-draggable'].containment = [0,0,$('body').width(), $('body').height()]

        ui.helper.appendTo("body");
    }
},

http://jsfiddle.net/puurqx8r/6/

Upvotes: 2

vijay kani
vijay kani

Reputation: 140

connectToSortable  It's a  Selector that Allows the draggable to be dropped onto the specified sortables. If this option is used, a draggable can be dropped onto a sortable list and then becomes part of it. Note: The helper option must be set to "clone" in order to work flawlessly. Requires the jQuery UI Sortable plugin to be included.

Code examples:

Initialize the draggable with the connectToSortableoption specified:

$( ".selector" ).draggable({

connectToSortable: "#my-sortable"
 cursorAt:{top: 5, left: t}

});

Upvotes: 0

Related Questions