Question

我在左侧有两个容器，在右侧，我从左侧拖动元素并放在右侧，左侧容器有两种类型，一种是拖动后克隆，另一种是移除，所以我放置了两个拖放，第一个掉了两次。

拖动后克隆：

<ul class='list-inline edit_audit_container edit_draggable elementUl>
<li class='item'>
<input type='text' readonly>
</li>
</ul>

拖动后将其删除：

<ul class='list-inline audit_container draggable elementUl>
<li class='item'>
<input type='text' readonly>
</li>
</ul>

拖到这个容器中

<div class="wid30c1 border droppable draggablemain">                                    
 </div>

图片链接：https://prnt.sc/q3skww

$(function () {
   $('.draggable').draggable({
revert: "invalid",
stack: "0",
helper: 'clone'
});
   // above codes drops twice

$('.edit_draggable').draggable({
revert: "true",
stack: "0"
});
$('.droppable').droppable({
accept: ".draggable,.edit_draggable",
drop: function (event, ui) {
	$(this).find("input").remove();
    var droppable = $(this);
    var draggable = ui.draggable;
    draggable.clone().appendTo(droppable);
   $(this).find("input").attr("name", "headercols[]");  
}
});
});

Answer 1

这里是一个例子。

$(function() {
  $('.draggable').draggable({
    stack: "0",
    start: function(e, ui) {
      console.log("Drag Start", ui.helper.attr("class"));
    }
  });

  $('.edit_draggable').draggable({
    stack: "0",
    helper: 'clone',
    start: function(e, ui) {
      console.log("Drag Start", ui.helper.attr("class"));
    }
  });

  $('.droppable').droppable({
    accept: "ul[class*='draggable']",
    drop: function(event, ui) {
      $(this).html("");
      var droppable = $(this);
      var draggable = ui.draggable;
      console.log("Drop", draggable.attr("class"));
      var c = draggable.clone().attr("style", "").appendTo(droppable);
      if (draggable.hasClass("draggable")) {
        draggable.remove();
      }
      $(this).find("input").attr("name", "headercols[]");
    }
  });
});

.left-col {
  width: 170px;
  float: left;
}

.list-inline {
  list-style: none;
  padding: 0;
}

.list-inline input {
  border-radius: 3px;
  padding: 6px;
}

.border {
  border: 1px solid #ccc;
  border-radius: 3px;
}

.droppable {
  width: 300px;
  height: 120px;
  margin: 20px;
  margin-left: 225px;
  padding: 3px;
}

.draggable input {
  border: 1px solid blue;
}

.edit_draggable input {
  border: 1px solid red;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="left-col">
  <ul class='list-inline edit_audit_container edit_draggable elementUl'>
    <li class='item'>
      <span class="ui-icon ui-icon-grip-dotted-vertical"></span><input type='text' readonly>
    </li>
  </ul>

  <ul class='list-inline audit_container draggable elementUl'>
    <li class='item'>
      <span class="ui-icon ui-icon-grip-dotted-vertical"></span><input type='text' readonly>
    </li>
  </ul>
</div>
<div class="wid30c1 border droppable draggablemain">
</div>

clone的放置条件与实际可拖动对象的放置条件会略有不同。

为什么第一个..draggable类下降两次？

1 个答案: