jquery sortable使用户能够在`n`秒后拖动元素
Posted
技术标签:
【中文标题】jquery sortable使用户能够在`n`秒后拖动元素【英文标题】:jquery sortable make user able to drag elements after `n` seconds 【发布时间】:2021-08-16 15:05:57 【问题描述】:我正在使用 jquery sortable 对图像列表进行排序。目前,用户只需点击并移动图像即可对其进行排序。但是,我想让它的工作方式有所不同。我希望用户应该点击并按住图像(此处位于 <li>
标签内)2 秒钟,然后激活带有边框的图像,然后用户才能拖动图像进行排序。这可能吗?
<ul id="sortable" class="reorder-gallery mt-5">
<li class="ui-state-default mediaSort" id="1" data-name="1.png">
<img src="images/1.jpg" >
</li>
<li class="ui-state-default mediaSort" id="2" data-name="2.png">
<img src="images/2.jpg" >
</li>
<li class="ui-state-default mediaSort" id="3" data-name="3.png">
<img src="images/3.jpg" >
</li>
<li class="ui-state-default mediaSort" id="4" data-name="4.png">
<img src="images/4.jpg" >
</li>
</ul>
JS
$("#sortable").sortable(
axis: 'x,y',
containment: "parent",
tolerance:'pointer',
update: function(event, ui)
$("#sortable").sortable( "option", "distance", 5 );
var item_order = new Array();
$('.reorder-gallery li').each(function()
item_order.push($(this).attr("id"));
);
$.ajax(
type: "POST",
url: "processes/sort.php",
data: 'order='+item_order,
cache: false,
success: function(data)
);
).disableSelection();
【问题讨论】:
【参考方案1】:在可排序的 jQuery UI 中有 delay
option 可能会有所帮助:
定义排序何时开始的时间(以毫秒为单位)。添加延迟有助于防止在单击元素时出现不必要的拖动。
请注意,该选项已弃用,仅在 1.12
之前的 jQuery UI 版本中可用。
还需要启用辅助程序 (helper: 'clone'
) 和 styled (#sortable .ui-sortable-helper
)。
P.S.遗憾的是,当延迟时间过去后,我没有找到改变样式的方法。
$("#sortable").sortable(
delay: 1000, // wait for 1 second before dragging
helper: "clone", // allows styling of element when dragging
axis: 'x,y',
containment: "parent",
tolerance:'pointer',
update: function(event, ui)
$("#sortable").sortable( "option", "distance", 5 );
var item_order = new Array();
$('.reorder-gallery li').each(function()
item_order.push($(this).attr("id"));
);
$.ajax(
type: "POST",
url: "processes/sort.php",
data: 'order='+item_order,
cache: false,
success: function(data)
);
).disableSelection();
#sortable .ui-sortable-helper
border: 1px solid red;
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<ul id="sortable" class="reorder-gallery mt-5">
<li class="ui-state-default mediaSort" id="1" data-name="1.png">
<img src="images/1.jpg" >
</li>
<li class="ui-state-default mediaSort" id="2" data-name="2.png">
<img src="images/2.jpg" >
</li>
<li class="ui-state-default mediaSort" id="3" data-name="3.png">
<img src="images/3.jpg" >
</li>
<li class="ui-state-default mediaSort" id="4" data-name="4.png">
<img src="images/4.jpg" >
</li>
</ul>
【讨论】:
以上是关于jquery sortable使用户能够在`n`秒后拖动元素的主要内容,如果未能解决你的问题,请参考以下文章
jquery-ui-sortable,当列表被隐藏时如何防止取消?