Question

这似乎是微不足道的，但无论如何我在这里。下面的代码是一个带有可排序列表的简单拖放。我想做的是做一些关于drop in元素的工作。在这个例子中，drop in项是div。我想要做的工作是创建一个包含div的新列表项。

任何帮助？

<script>
$(function(){
    $(".sortable").sortable();
    $( ".draggable" ).draggable({
        connectToSortable: ".sortable",
        helper: "clone",
        revert: "invalid",
    }); 
}
</script>
<div class="draggable">DRAG ME</div>
<ul class="sortable">
    <li>ITEM 1</li>
    <li>ITEM 2</li>
    <li>ITEM 3</li>
    <li>ITEM 4</li>
</ul>

这里有一些我也试过的东西

<script>
$(function(){
    $(".sortable").sortable({
        receive: function(event, ui) { 
            ui.item = $("<li></li>").append(ui.item);
        }
    });

    $('.sortable').droppable({
        drop: function(event, ui){
            ui.draggable = $("<li></li>").append(ui.draggable);
        }
    });
}
</script>

Answer 1

您需要在Sortable：

上使用stop事件

$(".sortable").sortable({
   stop: function(event, ui)
   {
      if (ui.item.is('div.draggable'))
         ui.item.replaceWith($('<li>' + ui.item.text() + '</li>'));
   }
});

学习参考：stop事件

有助于找到答案的类似问题：Using jQuery UI drag-and-drop: changing the dragged element on drop

Answer 2

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css">
<style>
li {
    border: 1px solid #ccc;
    padding: 10px;
    width: 200px;
}
div {
    border: 1px solid #cfc;
    padding: 10px;
    width: 200px;
}
</style>
<title>Drag and Sort</title>
<script>
$(document).ready(function(){
   $(".sortable").sortable();
   $(".draggable").draggable({
        connectToSortable: ".sortable",
        helper: "clone",
        revert: "invalid",
        stop: function(event, ui){
            var content = $(this).html();
            $('ul.sortable>div').replaceWith($('<li />').html(content));
        }
    });
});
</script>
<body id="container">
    <div class="draggable">DRAG ME</div>
    <ul class="sortable">
        <li>ITEM 1</li>
        <li>ITEM 2</li>
        <li>ITEM 3</li>
        <li>ITEM 4</li>
    </ul>
</body>

jquery draggable非列表项到可排序列表

2 个答案: