为什么dropable不接受被拖动的项目？

Question

为什么jQuery不能接受丢弃的项目？我不想在任何地方使用sortable。

$(function() {
	$(".item").draggable({
		helper: "clone",
		revert: "invalid"
	});
	$("#drop").droppable({
		accept:".item"
    });  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<div class="items">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>
<div id="drop">	</div>

Answer 1

确实有效：

＆＃13;

＆＃13;

$(function() {
	$(".item,.letter ").draggable({
		helper: "clone"
	});
	$("#drop").droppable({
		accept:".item",
        drop: function( event, ui ) {
          alert("dropped")
        }
    });  
});

＆＃13;

#drop {
  border:1px dashed gray;
  width:100px;
  height:100px;
}

.items * {
  background:rgba(0,0,0,.1);
  padding:3px 0;
  width:20px;
  text-align:center
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<div class="items">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

<br><br>

<div class="items">
  <div class="letter">a</div>
  <div class="letter">b</div>
  <div class="letter">c</div>
  <div class="letter">d</div>
  <div class="letter">e</div>
  <div class="letter">f</div>
</div>
<div id="drop">	</div>

＆＃13;

＆＃13;

＆＃13;

它正在接受它，但物品不会停留在那里。如果你想让克隆留在那里，你需要将它附加到容器中，如下所示：

＆＃13;

＆＃13;

$(function() {
    $(".item,.letter ").draggable({
        helper: 'clone'
    });
	$("#drop").droppable({
		accept:".item",
        drop: function(event, ui) {
            $(this).append($(ui.draggable).clone());
            $("#drop .item").addClass("dropped");
            $(".dropped").removeClass("ui-draggable item");
            $(".dropped").draggable({
                containment: 'parent',
                grid: [80,76]
            });
        }
    });  
});

＆＃13;

#drop {
  border:1px dashed gray;
  width:100px;
  height:100px;
}

.items *, .dropped {
  background:rgba(0,0,0,.1);
  padding:3px 0;
  width:20px;
  text-align:center
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<div class="items">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>
<div id="drop">	</div>

＆＃13;

＆＃13;

＆＃13;

当然你可以实现很多行为，例如另一个：

＆＃13;

＆＃13;

$(function() {
    $(".item,.letter ").draggable({
        helper: 'clone'
    });
	$("#drop").droppable({
		accept:".item",
        drop: function(event, ui) {
            $(this).append($(ui.draggable).clone());
            $("#drop .item").addClass("dropped");
            $(".dropped").removeClass("ui-draggable item");
            $(".dropped").draggable();
        }
    });  
});

＆＃13;

#drop {
  border:1px dashed gray;
  width:100px;
  height:100px;
}

.items *, .dropped {
  background:rgba(0,0,0,.1);
  padding:3px 0;
  width:20px;
  text-align:center
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<div class="items">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>
<div id="drop">	</div>

＆＃13;

＆＃13;

＆＃13;