CODEWITHSUNDEEP
jqueryjquery-ui
rooz
rooz

Reputation: 371

jquery draggable jumps when released on the page?

I'm trying to figure out why jquery ui draggable jumps when released on the droppable!

its basically jumping to the right and no matter where on the page is being released!

Here is a jsfiddle to explain the issue: https://jsfiddle.net/2wwa3yaw/1/

I think its because I have given the div #droppable a position of relative position:relative; but I need to do this.

is there any way to fix this?

any advise would be appreciated.

Upvotes: 0

Views: 306

Answers (1)

Twisty
Twisty

Reputation: 30893

I meant something more like this:

https://jsfiddle.net/Twisty/szmrb146/

When you append x, you can set the top and left via CSS.

HTML

<div align="center" style="width:100%; padding-top:10px;">
  <div id="dragme" style="width: 70px; height: 70px; border: 2px solid #CCC; position:absolute;">
    <P> Drag me </P>
  </div>
  <div align="center" id="droppable" style=" position:relative; width: 250px; height:550px; border: 2px dashed red;">
    <P> </P>
  </div>
</div>

JQuery

$("#dragme").draggable({
  helper: 'clone',
  cursor: 'move',
  tolerance: 'fit'
});

var x = null;
$("#droppable").droppable({
  drop: function(e, ui) {
    var parent = $("#droppable");
    var x = ui.helper.clone();
    var leftAdj = (ui.position.left - parent.offset().left);
    var topAdj = (ui.position.top - parent.offset().top);
    x.css({
      left: leftAdj,
      top: topAdj
    });
    x.draggable({
      helper: 'original',
      containment: '#droppable',
      tolerance: 'fit'
    });
    x.find('.ui-resizable-handle').remove();
    x.resizable();
    x.appendTo('#droppable');
    ui.helper.remove();
  }
});

Update

Found a minor bug, we only want to adjust these when we first drop the object. So I added a class and a condition:

https://jsfiddle.net/Twisty/szmrb146/1/

Add the class:

<div id="dragme" class="outside" style="width: 70px; height: 70px; border: 2px solid #CCC; position:absolute;">
    <P> Drag me </P>
  </div>

And the condition:

    if (x.hasClass("outside")) {
      x.css({
        left: leftAdj,
        top: topAdj
      });
      x.removeClass("outside");
    }

Upvotes: 1

Related Questions