将单独的div附加到克隆的可拖动

Question

我试图将一个单独的div添加到克隆的可拖动div中。

这个jsfiddle： http://jsfiddle.net/kdfiddle/26fuvqxe/

完全符合我的要求 - 除了 - 我希望克隆可拖动的。

问题 当我使用helper: 'clone',并尝试将单独的div附加到克隆时： http://jsfiddle.net/kdfiddle/o446vwas/

我希望附加的div - 不附加 - 除非您单击并拖动相同的Box＃两次。在第二次单击并拖动它然后执行我期望它。

Answer 1

这里的想法是当你开始拖动时克隆，克隆并在你停止时向可克隆的div添加draggable。

＆＃13;

＆＃13;

$(document).ready(function() {

  $(".box").draggable({
    helper: 'clone',
    start: function(event, ui) {
      $(ui.helper).append($("#appendable_div"));
    },
    stop: function(event, ui) {
      $(ui.helper).addClass('box-cloned').clone(true).appendTo('body');
      $(".box-cloned").on('mouseover', function() {
        $(this).draggable({
          start: function(event, ui) {
            $(ui.helper).append($("#appendable_div"));
          }
        });
      });
    }
  });

});

＆＃13;

#draggables {
  width: 200px;
  height: 100px;
  padding: 2em;
  margin: 10px;
  border: 1px solid;
}

.box, .box-cloned {
  border: 1px solid;
  background-color: grey;
  width: 150px;
}

#appendable_div {
  position: absolute;
  top: 2px;
  left: 2px;
  background-color: red;
  width: 100px;
  height: 50px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>

<div id="appendable_div">
  appendable div
</div>


<br><br><br><br><br><br><br>
<div id="draggables">

  <div class="box">Box #1</div>
  <div class="box">Box #2</div>
  <div class="box">Box #3</div>
  <div class="box">Box #4</div>

</div>
Drag a box above, to have the appendable div ... append to the box being dragged

＆＃13;

＆＃13;

＆＃13;