在页面上发布时，jquery可拖动的跳转? [英] jquery draggable jumps when released on the page?

问题描述

我试图弄清楚为什么jquery ui draggable在放置在可放置对象上时会跳转！

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!

以下是jsfiddle来解释此问题: https://jsfiddle.net/2wwa3yaw/1/

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

我认为是因为我给了div #droppable一个相对position:relative;的位置，但是我需要这样做.

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?

任何建议将不胜感激.

推荐答案

我的意思是这样的:

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

附加x时，可以通过CSS设置top和left.

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

更新

发现了一个小错误，我们只想在首次放置对象时进行调整.所以我添加了一个类和一个条件:

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/

添加课程:

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

条件:

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

这篇关于在页面上发布时，jquery可拖动的跳转?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！