介绍 & lt;跨类=& # 39;border-grey& # 39;可拖动的=& # 39;真正的# 39;id=& # 39;“+ num +“& # 39;>//拖动什么
函数阻力(e) {
e.dataTransfer.setData(& # 39;文本# 39;,e.target.id);//console.log ($ (& # 39; .border-grey& # 39;))
美元(& # 39;.border-grey& # 39;) . each((指数(元素)=比;{
如果元素。id===e.target.id) {//将拖动的元素的指数记录下来,与targetIndex进行比较,判断是向前插入还是向后插入
COMMON.index。originIndex=指数;
}
})//console.log (& # 39; originIndex& # 39;, COMMON.index.originIndex)
}//何处放置
函数allowDrop (ev) {
ev.preventDefault ();
}//进行放置
功能下降(ev) {
ev.preventDefault ();/* *
*判断不在控制范围内
*/如果(ev.target。className !=癰order-grey",,ev.target.parentElement。className !=癰order-grey",,ev.target.parentElement.parentElement。className !=癰order-grey") {
返回;
}
var id=啊?/放置目标id//如果放置的位置是span.border-grey
如果(ev.target。className==癰order-grey") {//如果放置的位置是span.border-grey元素
id=ev.target.id
如果(ev.target.parentElement}其他。className==癰order-grey") {//如果放置的位置是跨度。border-grey下的跨子元素
id=ev.target.parentElement.id
如果(ev.target.parentElement.parentElement}其他。className==癰order-grey") {//如果放置的位置是跨度。border-grey下的img子元素
id=ev.target.parentElement.parentElement.id
}
美元(& # 39;.border-grey& # 39;) . each((指数(元素)=比;{
如果元素。id===id) {//将放置的元素的指数记录下来,与targetIndex进行比较,判断是向前插入还是向后插入
COMMON.index。targetIndex=指数;
}
})
var data=https://www.yisu.com/zixun/ev.dataTransfer.getData(“文本”);//放置目标的指数大于拖拽元素的指数,说明是向后插入,反之亦然
如果(COMMON.index。targetIndex> COMMON.index.originIndex) {
$ (" # " + id)后(. getelementbyid(数据));
其他}{
$ (" # " + id) .before (. getelementbyid(数据));
}
}
这篇文章将为大家详细讲解有关H5实现拖拽排序的案例,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
一、需求
豆果食谱系统,sku列表实现拖拽排序,如图:
二,HTML5拖放API的知识点
首先我们得知道元素怎么才可以被拖放,需要设置它们的拖拽属性,其中img和一个标签的拖动属性默认是真的,不需要我们手动设置。
拖放API的监听事件如下:
dragstart:源对象拖拽开始;
拖:源对象拖拽的过程中,
拖动结束:源对象拖拽结束;
dragenter:进入过程对象区域;
dragover:在过程对象区域内移动;
dragleave:离开过程对象区域;
下降:源对象拖放到目标区域。
? ?对于这几个事件,我们要结合需求利用preventDefault()取消它的默认行为。
? ?在拖放事件中,提供dataTransfer用于在源对象与目标对象之间传递数据,dataTransfer一般通过e。dataTransfer调
用,dataTransfer的方法如下:
setData(格式、数据)
getData(格式),
clearData ()。
三,html结构:
p.cp-sku-show
。border-grey
跨跨
img
四、拖拽实现思路
1,将要拖拽的span.border-grey的拖拽的属性设置为“true";
2,判断拖拽源和放置目标的指数,如果放置目标的指数大,则将拖拽源向后插入,反之,则将拖拽源向前插入;
五,实现代码
关于H5实现拖拽排序的案例就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。
