Question

我有一个简单的DIV

 <div class="draggable">some text</div>

我正在使用下面列出的jQuery UI使用“Ghost”或“Semi Transparent Clone”视觉效果：https://jqueryui.com/draggable/#visual-feedback

我要做的是在“Ghost”div被删除后在“Ghost”div的位置创建一个新的可拖动DIV。

我尝试的代码（显示“Ghost / Semi-Transparent”）是..

$( ".draggable" ).draggable({
    opacity: 0.7, helper: "clone",
 stop: function() {
     alert($(this).offset().top);
  }
});

当前代码演示：https://jsfiddle.net/y49bg4pf/

我尝试设置一个警报只是为了测试幽灵对象的偏移量，但当然它只显示原始偏移而不是幽灵。我假设一旦我能想出这个部分，那么我应该能够创建一个新的DIV，并为它分配“draggable”类，用新创建的DIV重新做这个。

Answer 1

我已正确组织你的代码（将CSS与标记分开），我添加了一个名为container的包装器div。您可以访问ui.offset之后的偏移值，但需要将其作为参数发送到stop函数。

如果这是理想的行为，请告诉我。从原始拖动将创建一个可拖动的新元素，但不会在拖动时继续创建新元素。

$(function() {
  $(".draggable").draggable({
    opacity: 0.7,
    helper: "clone",
    stop: function(e, ui) {
      var newEl = $(this).clone();
      newEl.css("top", ui.offset.top);
      newEl.css("left", ui.offset.left);
      $('#container').append(newEl);
      $(".draggable").draggable();
    }
  });
});

#container{
  position: relative;
}
.draggable{
  height: 40px;
  width: 80px;
  background-color: maroon;
  color: yellow;
  position: absolute;
  border: 1px solid black;
}

<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

<div id="container">
<div class="draggable">some text</div>
</div>

根据jQuery Semi透明拖放视觉

1 个答案: