javascript - Jquery拖放恢复到原始位置，双击div

Question

我有拖放元素，旨在从一个 div 拖放到另一个 div 中。创建隐藏字段时，我会捕获每个元素的原始位置。

我想让元素返回到原始 div 和 dblclick 上的位置，但它们总是重新定位到放置目标 div 中>.

有什么想法吗？

<div id="cardPiles">
  <div id="D1" class="draggable" ondblclick="rev(this)">1</div>
  <div id="D2" class="draggable" ondblclick="rev(this)">2</div>
  <div id="D3" class="draggable" ondblclick="rev(this)">3</div>
  <div id="D4" class="draggable" ondblclick="rev(this)">4</div>
  <div id="D5" class="draggable" ondblclick="rev(this)">5</div>
  <div id="D6" class="draggable" ondblclick="rev(this)">6</div> 
</div>

function rev(me) {
  var b = $(me).text();
  var h = $('#H' + b).text();
  var s = h.split(',');
  var top = s[0];
  var left =s[1];
  $(me).parent().css({ position: 'relative' });  //tried absolute also
  $(me).css({top:top,left:left,position:'absolute' });
}

Answer 1

这是一个可能的答案。如果它不适合您的用例，请使用更多详细信息编辑您的帖子。

工作示例:https://jsfiddle.net/Twisty/u1rd9dpg/6/

HTML

<div id="cardPiles">
  <div id="D1" class="draggable ui-widget-content" data-origin="">1</div>
  <div id="D2" class="draggable ui-widget-content" data-origin="">2</div>
  <div id="D3" class="draggable ui-widget-content" data-origin="">3</div>
  <div id="D4" class="draggable ui-widget-content" data-origin="">4</div>
  <div id="D5" class="draggable ui-widget-content" data-origin="">5</div>
  <div id="D6" class="draggable ui-widget-content" data-origin="">6</div>
</div>
<div id="cardDrop">
</div>

JQuery

function rev(me) {
  console.log("DoubleClick Detected.");
  var pos = me.data("origin");
  console.log("Returning to: ", pos);
  var $o = me.clone();
  $o.draggable({
    cursor: "move",
    start: log
  });
  me.remove();
  if ($("#cardPiles div").length == 0) {
    $("#cardPiles").append($o);
    return true;
  }
  $("#cardPiles .draggable").each(function(k, v) {
    var txt = parseInt($(v).text());
    if ($o.data("order") < txt) {
      $(v).before($o);
      return false;
    } else {
      $("#cardPiles").append($o);
    }
  });

}

function log(e, ui) {
  var pos = ui.offset;
  var $ob = $("#" + ui.helper.attr("id"));
  pos.order = parseInt(ui.helper.text());
  $ob.attr("data-top", pos.top);
  $ob.attr("data-left", pos.left);
  $ob.attr("data-order", pos.order);
  $ob.attr("data-origin", [pos.top, pos.left, pos.order].join(","));
  console.log("DragStart Position: ", pos);
  console.log("Logged: " + [$ob.data("top"), $ob.data("left"), $ob.data("order")].join(","));
}

$(function() {
  $(".draggable").draggable({
    cursor: "move",
    start: log
  });
  $("#cardDrop").on("dblclick", ".dropped", function() {
    console.log("Origin found: ", $(this).data("origin"), $(this).data("top"));
    rev($(this));
  });
  $("#cardDrop").droppable({
    accept: "#cardPiles div",
    activeClass: "ui-state-highlight",
    drop: function(e, ui) {
      var $drop = ui.draggable.clone();
      console.log("Dropped. Origin: ", $drop.data("origin"));
      $drop.removeAttr("style");
      $drop.addClass("dropped");
      $(this).append($drop);
      ui.draggable.remove();
      var c = $("#cardDrop div").length;
    }
  }).sortable({
    revert: true
  });
});

我不确定您是否需要在 CSS 中执行此操作，但我根据顺序进行了操作，让 CSS 仅定义它们在列表中的显示方式。

拖动 开始时，我将原始详细信息记录到各种数据属性中。这允许稍后在仅与该元素进行交互时检索它们。

当 drop 发生时，我克隆原始文件，然后附加克隆文件。不必这样做，但对我来说，它可以帮助我确定发生了什么。由于它不再是 draggable，您可以删除该类，但我只是添加了 dropped 以便能够更轻松地捕获双击事件。

当 dblclick 在我们的对象上触发时，我再次克隆它，然后重新追加它。再次让它成为 .draggable() 。我寻找下一件商品的编号并将其放在下面。

如果其中的文本不容易排序，我会添加一个 order 属性或填充 data-order 属性。您可以在拖动它时执行此操作，也可以从 ID 读取它...不确定哪种方式最适合您。

您可以一遍又一遍地执行此操作，如果愿意，可以将它们全部拖出 #cardPile。