当我从下拉列表中删除droppable项目时,应将其添加到可拖动列表中。
你可以帮我编码一下如何让我再次在拖拽列表中看到它。
HTML:
<div class="draggable"> <div class="cs-drop">drag 1
<a href="#"> remove</a></div></div>
<div class="draggable">drag 2</div>
<div class="draggable">drag 3</div>
<div style="clear: both;"></div>
<div class="droppable">drop here</div>
<div class="droppable">drop here</div>
<div class="droppable">drop here</div>
CSS:
<style>
.draggable { padding: 40px 25px; border: 1px solid red; float: left;}
.droppable { width: 100px; height: 100px; border: 1px solid black; float: left; }
.droppable.active { background-color: red; }
</style>
JS:
<script>
$('.draggable').draggable({ revert: true });
drop();
function drop()
{
$('.droppable').droppable({
hoverClass: 'active',
drop: function(e, ui) {
$(this).html($(this).html()+ui.draggable.remove().html());
$(this).droppable('destroy');
}
});
}
$(".droppable").on("click", "a", function (){
$(this).closest('.cs-drop').fadeOut(200, function() {$(this).remove();});
drop();
});
</script>
答案 0 :(得分:0)
这是工作代码。你需要优化一点!再阅读Draggable API并阅读一些示例。
<div class="drag-item">
<div class="cs-drop">drag 1 <a href="#"> remove</a></div>
<div class="cs-drop">drag 2</div>
<div class="cs-drop">drag 3</div>
</div>
<div style="clear: both;"></div>
<div class="drop-container">drop here</div>
<div class="drop-container">drop here</div>
<div class="drop-container">drop here</div>
$('.cs-drop').draggable({
revert: true
});
drop();
function drop() {
$('.drop-container').droppable({
hoverClass: 'active',
drop: function (e, ui) {
$(this).append(ui.draggable);
$(this).droppable('destroy');
}
});
}
$(".drop-container").on("click", ".cs-drop a", function () {
$(this).closest('.cs-drop').fadeOut(200, function () {
$('.drag-item').prepend($(this).clone().css('display','block'));
$(this).remove();
});
});
更新后的fiddle
并且永远不会像draggable / droppable那样使用classess,因为jQuery框架也使用它们。尝试更独特的东西。