我的代码有问题:它应该具有从右到左的可拖动性，并且应该可以在左侧排序。到目前为止，一切都很好。 但是我遇到了一个错误:当我从左边的 div 中拖动元素时，另一个克隆出现在屏幕上，我无法弄清楚。 我还需要帮助从右侧添加多个元素并使用计数器显示同一元素的数量。 这是我的代码:
$(function drag() {
$(".item").draggable({
cursor: 'move',
helper: 'clone',
appendTo: '#droppable',
});
});
$(function drop() {
$("#droppable").droppable({
accept: '.item',
drop: function(event, ui) {
ui.draggable.clone().appendTo($(this));
}
});
$("#droppable").sortable({
helper: "clone"
});
$("#droppable").disableSelection();
});#draggable {
width: 150px;
height: 600px;
border: 1px black hidden;
float: right;
}
.item {
width: 70px;
height: 100px;
border-radius: 10%;
margin: auto;
margin-top: 11.5%;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.black {
background-color: black;
}
.green {
background-color: green;
}
.yellow {
background-color: yellow;
}
#droppable {
width: 150px;
height: 600px;
border: 1px black solid;
float: left;
}
#div_1 {
background-color: red;
}
#div_2 {
background-color: blue;
}
#div_3 {
background-color: black;
}
#div_4 {
background-color: green;
}
#div_5 {
background-color: yellow;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
<body>
<div id="draggable">
<div id="div_1" class="item red" draggable="true">1</div>
<div id="div_2" class="item blue" draggable="true">2</div>
<div id="div_3" class="item black" draggable="true">3</div>
<div id="div_4" class="item green" draggable="true">4</div>
<div id="div_5" class="item yellow" draggable="true">5</div>
</div>
<div id="droppable" ondrop="drop(event)">
</div>
</body>最佳答案
这里是解决方案 https://jsfiddle.net/0nf83chm/1/
$( ".item" ).draggable({
cursor:'move',
helper:'clone',
appendTo:'#droppable',
});
$("#droppable").droppable({
accept: '.item',
drop:function (event, ui) {
ui.draggable.clone().appendTo($(this));
}
});
$("#droppable").sortable({helper: "clone"});
$("#droppable").disableSelection(); #draggable{width:150px; height:600px; border:1px black hidden; float:right;}
.item{width:70px; height:100px; border-radius:10%; margin:auto; margin-top:11.5%;}
.red{background-color:red;}
.blue{background-color:blue;}
.black{background-color:black;}
.green{background-color:green;}
.yellow{background-color:yellow;}
#droppable{width:150px; height:600px; border:1px black solid; float:left;}
#div_1{background-color:red;}
#div_2{background-color:blue;}
#div_3{background-color:black;}
#div_4{background-color:green;}
#div_5{background-color:yellow;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="draggable">
<div id="div_1" class="item red" draggable="true">1</div>
<div id="div_2" class="item blue" draggable="true">2</div>
<div id="div_3" class="item black" draggable="true">3</div>
<div id="div_4" class="item green" draggable="true">4</div>
<div id="div_5" class="item yellow" draggable="true">5</div>
</div>
<div id="droppable" ></div>关于javascript - jquery拖放错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45252112/