jquery可拖动非列表项到可排序列表答案

【问题标题】：jquery draggable non list item to sortable listjquery可拖动非列表项到可排序列表
【发布时间】：2011-12-10 12:49:06
【问题描述】：

这似乎是微不足道的，但无论如何我都在这里。下面的代码是一个带有可排序列表的简单拖放。我想做的是对插入的元素做一些工作。在此示例中，放入的项目是一个 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>

【问题讨论】：

你想对元素做什么？当它被放入排序中时，您希望它以<li> 的形式进入吗？不确定我是否理解。
修改了操作并添加了一些示例以使其更加清晰。

标签： jquery draggable jquery-ui-sortable

【解决方案1】：

您需要在 Sortable 上使用 stop 事件：

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

学习参考：stopevent

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

【讨论】：

【解决方案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>

【讨论】：

我认为OP希望在将div插入li之前将其转换为li。
我在顶部的 <script> 块中看到了语法错误，并认为这是问题所在。 “我想在它成为列表的一部分之前对它做一些工作。”是模糊的。