双击时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 定义它们在列表中的显示方式。

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

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

当dblclick 触发我们的对象时，我再次克隆它，然后重新附加它。再次将其设为.draggable()。我寻找下一个项目的编号并将其放入下方。

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

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