jquery可拖动非列表项到可排序列表
Posted
技术标签:
【中文标题】jquery可拖动非列表项到可排序列表【英文标题】：jquery draggable non list item to sortable list 【发布时间】：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> 的形式进入吗？不确定我是否理解。
修改了操作并添加了一些示例以使其更加清晰。
【参考方案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> 块中看到了语法错误，并认为这是问题所在。 “我想在它成为列表的一部分之前对它做一些工作。”是模糊的。以上是关于jquery可拖动非列表项到可排序列表的主要内容，如果未能解决你的问题，请参考以下文章