2

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

zuc0001
  • 924
  • 4
  • 12
  • 27
  • Is expected result to move user cursor with `js` ? – guest271314 Jul 04 '15 at 01:59
  • @guest271314 expected result is for that draggable element to be UNDER the cursor when it is dragged out of that white box. instead the draggable element moves to the left of the screen, and is not under the cursor. – zuc0001 Jul 04 '15 at 02:00
  • _"the draggable element moves to the left of the screen, and is not under the cursor"_ Yes, appear as described at `gif` . _"expected result is for that draggable element to be UNDER the cursor when it is dragged out of that white box"_ Can create stacksnippets , jsfiddle http://jsfiddle.net to reproduce effect at `html` document ? – guest271314 Jul 04 '15 at 02:06
  • @guest271314 My bad sorry. Here is your jsfiddle: http://jsfiddle.net/h9yzsqfr/ So once you drag it out of the container on the right, look where the element goes. The user cursor should be in tandem with the draggable element, if I understand correctly. – zuc0001 Jul 04 '15 at 02:18

5 Answers5

2

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/

Julien Grégoire
  • 16,864
  • 4
  • 32
  • 57
  • Thank you so much (removed my previous comment - found a solution). The only thing i had to add was the .containment line, everything else I left the same. Works perfectly. – zuc0001 Jul 04 '15 at 04:36
0

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}

});
vijay kani
  • 140
  • 8
  • thats not the problem though. Once I have dragged it onto the element, when I drag it off, the element is not underneath the cursor; as you can see in the GIF it has all the way towards the left of the screen. I want it to be draggable outside of it, but a bug is causing it to move away from the cursor. – zuc0001 Jul 04 '15 at 01:51
  • There is a option called cursorAt...it does the trick...I hope its help – vijay kani Jul 04 '15 at 02:17
  • Didn't work :(. Its still playing up. http://jsfiddle.net/h9yzsqfr/ Take a look at my example in that jsfiddle so you can see what the problem is. – zuc0001 Jul 04 '15 at 02:20
0

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

jQuery draggable shows helper in wrong place after page scrolled

Michelle Diniz
  • 81
  • 1
  • 2
0

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

Clint Clinton
  • 634
  • 5
  • 8
0

I removed position:absolute on dragable object

Vitalicus
  • 1,188
  • 13
  • 15