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或从ID中读取它时执行此操作...不确定哪种方法最适合您。

如果您愿意，可以反复执行此操作并将所有内容拖出#cardPile。

Jquery拖放恢复到原始位置，然后双击

1 个答案: