使动态添加的元素成为jQuery中的可排序句柄
在jQuery中，可以使用sortable()方法使动态添加的元素成为可排序的句柄。sortable()方法是jQuery UI库中的一个功能，用于创建可排序的列表或网格。
具体步骤如下：
- 引入jQuery和jQuery UI库：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>- 创建一个包含动态添加元素的容器：
<div id="sortable-container">
<!-- 动态添加的元素将放在这里 -->
</div>- 使用sortable()方法将容器中的元素设为可排序的句柄：
$(function() {
$("#sortable-container").sortable();
});- 动态添加元素时，确保它们具有相同的类名或标签名，并且位于sortable-container容器内：
$(function() {
// 动态添加元素
var newElement = $("<div class='sortable-item'>New Item</div>");
$("#sortable-container").append(newElement);
});在上述代码中，sortable-item类名用于标识可排序的元素。
这样，动态添加的元素就成为了可排序的句柄。用户可以通过拖拽元素来改变它们的顺序。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）
- 产品介绍链接地址：https://cloud.tencent.com/product/cvm
相关·内容
1回答
我有一个具有以下结构的两级深度可排序(jQuery)列表。ul元素和li元素都是可排序的。
<div id="container">
<ul id="x_one">
<li class="y_one"></li>
<li class="y_two"></li>
<li class="y_three"></li>
</ul>
<
浏览 4提问于2013-04-06得票数 0
回答已采纳
2回答
我使用jquery sortable在页面上拖放块。但是我的手柄有点问题。
块的html如下所示：
<div class="row insumo-editor-module" style="">
<div class="span12 module-toolbar">
<div class="btn-group pull-right">
<button class="btn btn-inverse btn-remove-module&#
浏览 2提问于2013-07-04得票数 1
我有一个使用jQuery、jQuery UI和Backbone.js的应用程序。最近出现了一个bug，当表中的一个行被删除时(jQUery可排序)，一个不同的行有时会在一行上移动，就好像有一个额外的单元格一样，但是在检查时没有。我刚刚注意到，这种情况只发生在Chrome、Chrome和ChromeFrame上。
下面是问题区域的屏幕截图：
以下是Chrome检查界面中HTML的屏幕截图：，我也复制了下面的HTML：
<tr id="17052151" class="wo">
<td>17052151</td>
<td&g
浏览 5提问于2011-10-28得票数 6
我已经使用了一些jQuery UI可排序插件，但我总是发现相同的问题，我不能选择或点击可排序的div，所以，也许我可以通过在只能拖动div的地方放置一个图标来找到解决方案，这样您就可以选择其他部分。
如何做到这一点？
浏览 0提问于2010-04-23得票数 16
回答已采纳
我想知道我们是否可以为jquery定义句柄，只为特定的项目排序。
我有可编辑和不可编辑的div，所以我希望可编辑的div只按它们的句柄排序，而不可编辑的div可以在没有句柄的情况下拖动。
浏览 1提问于2013-03-09得票数 0
我使用JQuery UI Sortable来允许在拖动元素时对列表中的元素进行重新排序。我想要改进这个处理，只允许从每个元素(这个图标是li中的一个跨度)而不是整个元素中的图标拖动时重新排序。
用Sortable可以做到这一点吗？
非常感谢你的帮助！蒂埃里
浏览 1提问于2012-06-12得票数 0
2回答
我试图使div中的项(它们是在页面加载时动态添加的，并且有一个“chart_container”类)是可排序的，但是发生的是我可以到处拖动它们，但是当我释放单击时，div又回到了以前的位置。有什么建议吗？
虚拟HTML：
*<div id="printable_charts" style="display:none;height:auto;">
<div id="printable_hw">
<img class="banner-img"
浏览 1提问于2016-07-30得票数 2
3回答
我有一些具有可排序选项句柄的困难。
当我使用：
$("table tr").sortable().disableSelection();
没有问题。
如果我添加句柄选项，则可排序将停止工作：
$("table tr").sortable({
handle: "td:eq(0)"
}).disableSelection();
链接：
有谁能帮帮我吗？
浏览 0提问于2010-12-17得票数 13
回答已采纳
我有一个从Ajax请求动态填充的jQuery UI可排序列表元素。
目前，工作流程
用户单击按钮，列表将按照指定的设置进行填充和排序。
用户单击另一个按钮，
现有的列表<li>元素被jQuery.empty()调用擦除
新的数据值被插入到新的<li>列表元素中，并附加到<ul>列表中。
可排序列表通过$(“# Sortable”).sortable(“刷新”)刷新；
给定一个可排序的列表对象$("#avail_list").sortable( ... );，我希望禁用特定列表元素的draggable属性，
浏览 2提问于2013-08-19得票数 12
回答已采纳
我有下面的例子
如果您按下红色bin图标上的delete按钮，它不会触发我的onClick事件处理程序(而是立即开始排序)。
如果您按下按钮的delete按钮背景(在bin图标周围圈)，它会触发按钮onClick处理程序并采取相应的行动。
我尝试过不同的onClick (包括xxxxCapture版本和e.preventDefault())，但没有取得任何成功。
问题
因此，我有两个问题：
有什么好的方法可以找出在树中首先处理点击的位置吗？
如何使我的按钮onClick在背景和icon本身之间保持一致？
代码
对于那些无法打开Stackblitz的人，代码是：
import
浏览 2提问于2019-06-02得票数 0
回答已采纳
1回答
因此，我使用jQuery UI可排序插件对小画廊中的照片进行排序。
$(function() {
$("#area").sortable({
items: '.sort-wrapper',
cursor: "move",
handle: ".photo-handler",
opacity: 0.5,
scroll: true,
scrollSensitivity: 100,
scrollSpeed: 5,
revert: 100,
tolerance: &
浏览 0提问于2017-10-26得票数 0
1回答
这是我的困境-我有一个两列的元素列表(样式<div>)，我需要使其可排序。对于存在于某一列或另一列中的元素，这很容易--我只需设置两列，将我的元素放在它们最初需要的位置，将它们标记为“可排序的”，并让jQuery发挥它的魔力。
但是，列表中有两个元素需要跨越这两个列。不幸的是，这破坏了模型的可用性。如果坚持使用标准的2列设置，就会遇到宽元素与另一列中的元素重叠或重叠的情况。
我还尝试迭代两列来重新定位元素，这样就不会有重叠，但是我意识到了另一个问题:我的第二列(右边)不知道第一列(左边)中的元素。
下面是我的标记的简化示例：
<div id="wrapper"
浏览 0提问于2010-10-11得票数 3
回答已采纳
我正在使用Jquery n css开发html5应用程序。我在div标签下创建了一个图像，如下所示
<div id="FrontRight">
<img id="imgFrontRight" src="../images/car.jpg">
</div>
现在，我希望这个图像-imgFrontRight可以使用以下属性进行拖动
$( "#imgFrontLeft" ). draggable
({
axis: "y" ,
containment:[0,152,0,
浏览 0提问于2013-02-08得票数 1
2回答
我在版本1.12.1中使用jquery-3.2.1.min.js和jquery-ui.min.js
我想创建一个可排序的列表，并且在该列表中，我希望某些元素是不可排序的(准确地说，是其他可排序列表)。输入元素保持可编辑是很重要的。
<ul id="a">
<li>sometext<input value="1" /></li>
<li>moretext<input value="2" /></li>
<li class="b"&g
浏览 5提问于2017-09-14得票数 1
1回答
我目前正在开发一个web应用程序，该应用程序在jScrollPane中具有动态更新手风琴的功能。
我现在正在尝试实现jQuery可排序，但没有成功。
目前，我发现的示例要求您将手风琴的头标记更改为"> div > h3“...where，然后sortable的处理程序是h3标记。
当保留手风琴的原始标题并试图使排序工作时，我似乎找不到任何解决方案。
在这个项目中，我不能更改手风琴的标题，因为很多功能都会被破坏，需要进行广泛的调整。
有没有人对这件事有任何想法？
谢谢,
大卫
编辑:下面是我试图使其工作的示例代码。我删除了手风琴中的标头选项，并使用可排序处理程序和单击操作进行
浏览 2提问于2011-08-17得票数 1
回答已采纳
我使用class来设置元素的可拖放属性(UL、LI或DIV)。因此，当我在设计时创建元素时，我可以根据需要进行拖放。但是当我动态创建一个元素时(一个带有id='ontheflyDiv‘的div )不能像droppable那样工作。
提前谢谢。
<html xmlns="">
<head>
<title></title>
<link rel="stylesheet" href="/Styles/themes/base/jquery.ui.all.css">
浏览 2提问于2011-08-16得票数 3
回答已采纳
我已经创建了一个基于的甘特图表形式的计划活动可视化。每个活动都应该是可拖动的，我已经通过jQuery UI拖放库实现了这一点。
<div class="container">
<div id="task_1" class="parent_bar" style="height:30px;width:190px"></div>
<div id="task_2" class="child_bar1"></div>
<div id="
浏览 1提问于2015-04-10得票数 2
回答已采纳
看看这个。当您拖动元素时，jQuery会实时修改列表的DOM，这样您就可以得到关于下降效果的反馈。不管怎么说，还是要停止这种行为吗？或者至少为这件事做出我自己的行为？
编辑：，我想保留所有其他DOM操作。我只想删除占位符元素的动态移动。
谢谢!
浏览 4提问于2012-11-25得票数 1
我们正在尝试在ROR应用程序中实现一个功能，以便能够在不同的表间拖放行。我们尝试使用脚本拖放方法，但是它不能在table标签中工作。
你能给我们指出其他可能有用的替代方案，如JQuery等吗？
感谢Supreet
浏览 2提问于2010-09-14得票数 0
回答已采纳
3回答
我尝试根据拖动时鼠标所在的区域动态设置Jquery UI可排序帮助器。为此，我使用了Jquery UI可排序设置器。它肯定会改变它，但它不是实时的(不是在当前事件中)。有什么想法吗?我该怎么做呢？
我举了一个例子--
谢谢。
浏览 1提问于2012-05-05得票数 1
回答已采纳
1回答
更新问题：
代码：
Ext.application({
name: 'Fiddle',
launch: function() {
var templ = new Ext.XTemplate(
'<tpl if="isActive">',
'<div style="color:red" class="',
Ext.baseCSSPrefix + 'list-sortablehandle&#
浏览 2提问于2014-02-12得票数 0
回答已采纳
1回答
我正在做一个相当复杂的项目，其中将有许多LI对象，我想让它们可拖放到几个预定义的UL中，然后根据它被放入的UL组来执行特定的命令。
我已经找到了很多不同的jQuery插件，但是我想知道最好和最容易适应这种情况的是什么？
非常感谢您的任何建议！
浏览 0提问于2012-12-04得票数 0
1回答
显示标题标题和图像滑块
、、、、
我使用动态驱动器中的motiongallery.js (CMotion图片库)创建了这个。
我正在尝试使用jQuery Capty将alt或标题文本设置为标题，但是它不能正确显示(请参阅)。
有没有人有任何关于如何使其工作的提示或建议？
浏览 2提问于2012-10-30得票数 1
回答已采纳
1回答
我正在寻找一种实现jquery的方法，比如在完整日历中的单个事件上实现拖动句柄。
用例是
$("#calendar").fullCalendar({
//the normal parameters here
eventsDragHandle: "someClass"
});
或
$("#calendar").fullCalendar({
//the normal parameters here
eventHasDragHandle: true
});
这样，除非特定的句柄被鼠标向下移动，否则事件不会被拖动。
我试图修改
浏览 1提问于2013-10-14得票数 0
回答已采纳
1回答
有人能推荐一个好的拖放和-Drop框架吗？
类似jquery的示例，其中可以将一组小部件放到某种仪表板布局页面上，例如使用图片库。
最近，我发现了这个非常酷的jquery和基于引导带3.0的动态布局工具，叫做网格管理器- 。
您还可以查看这里的演示程序。
因此，考虑到这一点，我想添加一个拖放侧边栏，它将允许我将“小工具”放到网格系统上。
我使用的是Kendo和JQWidgets，但是我不太确定如何将拖放集成到这个网格管理器系统中。
在我的索引页面中添加jquery和gridmanager /css文件后，代码如下所示：
<section id="dashboard-view&
浏览 4提问于2014-11-17得票数 1
回答已采纳
2回答
下面是jQuery UI 和中的示例，我使用的是这个HTML：
<ul class="sort">
<li>
<button>A</button>
</li>
<li>
<button>B</button>
</li>
<li>
<button>C</button>
</li>
</ul>
而这个JS：
$(function () {
$('.sort&
浏览 5提问于2014-05-22得票数 3
回答已采纳
2回答
如何使用jquery创建移动句柄
、、、、
这更多的是理论类型的问题。
在我的web应用程序中，我想创建一个用户可以点击的按钮，从而启动一个移动模式，在此期间(直到鼠标释放)所有的鼠标移动都会被转换到某个DIV上。
为了更好地理解我的意思，想一想在其中显示图像一部分的框(box is overflow:hidden) -我想让在框中移动图像成为可能，但不是通过直接拖动图像，而是通过拖动手柄(拖动时不会移动的手柄)
在最佳情况下，当拖动操作处于打开状态时，鼠标光标将隐藏。
我的基本想法是使用draggable，但我不知道如何使它可访问，但又不可见。
我如何使用javascript/jQuery来实现这一点呢？
浏览 2提问于2012-09-10得票数 1
回答已采纳
我刚刚使用JQuery UI创建了一个可排序的折叠面板，并使用使触控设备能够对部分进行排序。拖放工作很好，但我注意到“触摸延伸”并不总是有效的，我必须触摸几次才能使部分延伸。
有谁知道解决这个问题的方法吗？
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<div id="accordion">
<div clas
浏览 5提问于2016-05-16得票数 0
我有一个可排序的列表。当一个新的项目被放到列表中时(从可拖动的)，我想要访问它来对它执行一些操作。这就是我所拥有的：
$("#mySortableList").sortable({
receive: function(event, ui) {
alert("this is the dropped item: " + ui.item.toString());
}
}).disableSelection();
因此，"ui.item“是被删除的元素，但它不是现在将成为我列表的一部分的重复项。如何访问已删除的新项目？我在这里使用
浏览 1提问于2010-06-15得票数 4
在我正在进行的当前项目中，我需要能够使用jQuery动态添加多个级别的可排序嵌套列表。我有嵌套的可排序列表按需要工作，但我遇到的问题是，父母的下一个兄弟姐妹在视觉上重叠以前父母兄弟姐妹的后代，如所见
在视觉上，我需要每个列表项不重叠其兄弟姐妹的任何后代，所以我的想法是，我需要根据子代元素的累积高度来设置高度/边距底部。
我唯一能对作品进行排序的方法是：
function resizeHeight(){
var setToChildrenHeights = function(){
var height = $(this).height();
$(this)
浏览 3提问于2014-04-23得票数 0
回答已采纳
1回答
可下垂后调整大小不起作用
、、、
我正在经历一个奇怪的问题，在可调整大小的Jquery事件和可丢弃的Jquery事件之间出现了混乱。
问题
我有一个可以很容易调整大小的div。但我不能调整大小后，我拖放这个div到可下垂的区域。有人能帮上忙吗。
这是我的
我有以下代码
Jquery
function makeDraggable() {
$(".selectorField")
.draggable({
containment: $('body'),
helper
浏览 3提问于2014-11-10得票数 3
回答已采纳
2回答
正如您在中看到的那样，必须将项目拖到右边，以便能够上下移动.
--我希望用户能够直接上下移动项目，甚至向左和向下移动。显然不是直观的，必须拖到右边才能垂直地重新排序。
箭头图标是handle，您必须单击并拖动该部分才能移动项目。
HTML:
<body class="container">
<div class="form-group">
<label class="control-label col-md-2">Testeroo</label>
<div class=&#
浏览 4提问于2017-12-21得票数 2
回答已采纳
3回答
在我的页面上运行JQuery-UI交互时，我遇到了一点问题。我以前没有使用过JQuery-UI，所以我从尝试可排序的交互开始，希望以后能让它变得可拖放和可排序。然而，我一直在用头撞墙，甚至无法让可排序的工作。
我尝试排序的内容是使用ajax动态加载的。以下是内容外观的表示形式：
<ul id="category_list">
<li class="category" data-category-id="17">Education</li>
<li class="category&#
浏览 0提问于2013-01-09得票数 0
回答已采纳
我需要允许使用下面的jQuery sortable.Please校验码对特定元素进行排序。
<html lang="en">
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<s
浏览 0提问于2018-08-06得票数 0
1回答
我一直在为我的网站制作一个jQuery定制的可排序手风琴。下一个实现阶段是可排序手风琴的每个标题上的一个按钮，该按钮将从jQuery可排序手风琴中删除可扩展部分列表。
我已经准备好了可以使用的代码，但是我似乎无法在标题上覆盖按钮，除非它是单击函数上的标题的一部分来展开或拖动函数来排序，但是我希望它在排序时遵循手风琴。
function create_accordian(str) {
$( str )
.accordion({
header: '> div > h3',
autoHeight: false,
浏览 2提问于2014-06-12得票数 0
回答已采纳
1回答
我希望能够通过拖动一个特定的内部div来移动外部div。只有内部div才能移动外部div。
我尝试在out div上使用Jquery的draggable()方法，但这允许用户通过单击和拖动外部div中的任何位置来移动外部div，这样可以防止用户突出显示要复制的文本。
我设置了一个jsFiddle 。
当单击和拖动特定的内部div时，如何使外部div仅可拖动？
浏览 5提问于2015-08-20得票数 2
回答已采纳
我已经使用mootools sortables创建了一个表来实现拖放功能。在我的表中，一些列有hyperlink，我点击了hyperlink/input框，它总是像onComplete一样调用textboxes.When的回调。
我试过使用Sortable的handle属性，但这个属性的问题是它只需要一个element.If，我必须使用行的多列作为句柄，那么我需要做什么呢?我有任何希望吗？
提前谢谢。
浏览 0提问于2011-09-29得票数 1
回答已采纳
我有一个JavaScript文件，它包含在客户的网站上，用于进行访问者调查。所有的代码都在一个匿名函数中，这就造成了一些问题，因为我需要动态地为调查生成HTML。
基本上，使用JavaScript (作为div)生成调查的HTML并添加到DOM中。HTML的一部分具有指向其他函数(close、submit等)的超链接，但它看不到我在匿名函数包装器中拥有的任何函数。我不想只为了这件事而暴露我所有的方法。有什么方法可以让动态HTML查看我的函数吗？而且，我不能使用jQuery。
(function () {
...
function displaySurvey(x) {
/// &
浏览 3提问于2013-10-16得票数 1
回答已采纳
我有一块可拖拽的画布。我需要在包含画布的div之外的某个地方放置一个处理程序。
这是一个画布代码：
<canvas width="700" height="500" class="ui-draggable" style="width: 450px; top: 257px; left: 200px;"></canvas>
浏览 1提问于2015-05-21得票数 1
我使用的是jQuery 1.8.2和jQuery UI 1.9.1。这是我第一次尝试使用滑块。
我正在尝试让四个滑块在同一个页面上工作。第一个句柄显示得很好，但我不能让第二个句柄显示出来。
你可以在这里看到完整的文件
我做错了什么？
<style>
#SliderWrapper {
height: 200px;
width: 200px;
}
.Slider {
width: 150px;
margin: 25px;
float: left;
}
.Label {
width: 150px;
float: left;
}
浏览 3提问于2012-11-03得票数 1
回答已采纳
我正在使用一个jquery表排序插件()来排序我的表。这适用于已经创建的行。但是，当我使用Jquery clone()方法动态添加一行时，排序不起作用。
即使我动态添加了一行，我应该如何对行进行排序？
浏览 0提问于2010-09-16得票数 4
回答已采纳
如何支持拖动项以更改JQuery SelectBox控件中元素的顺序？
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#sortable li span { position: absolute; margin-left: -1.3em; }
#sel
浏览 3提问于2013-02-15得票数 0
回答已采纳
2回答
我有一个带有flash视频的模式对话框，我正在使用jQuery draggable插件来使其可拖动。在Chrome上，它不能让我播放视频(当我点击播放按钮时，它什么也不起作用，但如果我按住鼠标，我可以到处拖动div )。在Firefox上，视频可以播放，但鼠标被“卡住”在div上，div会跟随它。有什么简单的方法可以防止在flash div上拖拽吗？
浏览 7提问于2011-11-09得票数 3
有谁能解释一下，.sortable是否可以应用于将被动态添加的未来jQuery对象，这意味着它不存在于当前的 DOM中，就像不推荐的.live函数一样？谢谢。
浏览 0提问于2013-03-14得票数 2
回答已采纳
我目前正在玩可排序的交互在jQuery中。现在，我添加了一个未排序的列表，该列表作为网格显示在我的项目中。源代码与我在中找到的源代码相当。我希望用户能够显示数据库的某些值，让他们将每个项目移动到自己选择的位置，并将更改发送回服务器。我几乎实现了所有这样做，但我不知道如何获得客户端的项目列表，在用户根据他们的需要排序列表。
我的问题是:在用户移动项目之后，如何获得所有项的数组？我试图使用以下内容访问列表的源代码：
$( "#sortable" ).toArray()[0]
它返回一个HTMLUListElement对象。字段innerText是未定义的，innerHTML返回整个
浏览 1提问于2012-03-11得票数 1
回答已采纳
1回答
我想做一个拖拉的编辑。但是，当我试图拖动光标时，编辑器会“粘住”光标。对于普通的div来说很好。
<script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'
浏览 1提问于2013-12-19得票数 1
回答已采纳
我使用Jquery可排序来重新排序项目。在我的GUI中，我有一个垃圾图标，在这里可以丢弃排序项。垃圾桶是个容易下流的地方。
现在，当排序项助手盘旋在可下垂的区域上时，我改变了它的大小，以便给用户提供视觉反馈，可以将其丢弃。但是，我还想重新定位排序项助手，以便它与鼠标光标对齐。
我试过：
$(trashcan)
.droppable(
{
over: function (event, ui)
{
ui
.draggable
.css("transform
浏览 2提问于2014-07-11得票数 1
回答已采纳
1回答
动态添加元素，可拖动和可排序
、、、、
嗨，我很难做小提琴
我喜欢做的是：
动态添加组
动态添加问题
可排序群
可排序问题
问题可以提交给另一组。
但小提琴只会：
动态添加组
动态添加问题
可排序问题
另外，生成的输入也被禁用了，这是怎么回事？
有人能帮帮我吗？我是后台的人所以请饶了我吧。
提前谢谢你。
浏览 3提问于2014-01-30得票数 1
回答已采纳
对于我试图解决的问题，我有一个表，每一行都有唯一的内容。允许通过句柄对行进行重新排序，并且每行的内容并不总是高度一致。有时，一行中会出现大量的文本和/或图像。
还可以有多个表，其中的行可以重新排序，因此我使用了containment属性来防止拖动到其他区域，以及在拖动到所需区域之外时发生的其他问题。
问题是，当我试图将一个“高”行拖到顺序的顶部或底部时，相比之下，顶部和底部都是“短”的。基本上，我不允许将高行拖到这些位置。我一直在寻找解决方案，但还是找不到。任何帮助都将不胜感激。
此处的工作示例：
中间的两行都不能拖到列表的顶部或底部。
HTML：
<div class="con
浏览 4提问于2013-01-17得票数 5
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
