jQuery拖放拖放到原始位置并双击div [英] Jquery drag drop revert to original position and div on double click

问题描述

我有拖放项目，打算从一个div拖放到另一个div.创建它们时，我会捕获每个项目在隐藏字段中的原始位置.

I have drag-and-drop items, intended to be dragged from one div and dropped into another div. I capture the original position of each item in hidden fields when they are created.

我想让物品回到原始的div和dblclick上的位置，但是它们总是在放置目标div内重新放置.

I want to get the items to go back to the original div and location on dblclick, but they always relocate inside the drop target 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' });
}

推荐答案

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

Here is a possible answer. If it does not fit your use case, edit your post with more details.

工作示例: 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定义它们在列表中的显示方式.

I'm not sure if you need to do this in CSS or not, but I went based on the order and let the CSS just define how they appear in the list.

drag启动时，我将原点详细信息记录到各种数据属性中.这样，当与该元素发生交互时，便可以在以后检索它们.

When the drag starts, I log the origin details to various data attributes. This allows them to be retrieved later when there is an interaction with just that element.

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

When drop happens, I clone the original and then append the clone. Do not have to do this, yet for me, it helps me identify whats happening. Since it's no longer draggable, you could remove the class, but I just added dropped to be able to more easily catch the Double Click event.

当dblclick在我们的对象上触发时，我再次对其进行克隆，然后将其重新添加回去.再次将其设置为.draggable().我寻找下一个物品的编号并将其放在下面.

When dblclick fires on our object, I clone it again, and re-append it back. Make it .draggable() again too. I hunt for the next item's number and fit it in underneath.

如果其中的文本不那么容易排序，则可以添加order属性或填充data-order属性.您可以在拖动它时执行此操作，或者从ID中读取它……不确定哪种方法最适合您.

If the text within is not easy to order like that, I would add an order attribute or populate the data-order attribute. You can do this when it's dragged or read it from the ID... not sure what might work best for you.

您可以一遍又一遍地执行此操作，并根据需要将其全部拖出#cardPile.

You can do this over and over and drag all of them out of #cardPile if you like.

这篇关于jQuery拖放拖放到原始位置并双击div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！