Sortable.js移动端拖拽排序的容器li标签里含有其他点击事件如何写

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Sortable.js移动端拖拽排序的容器li标签里含有其他点击事件如何写相关的知识,希望对你有一定的参考价值。

思路:为li对象添加单击事件→事件触发后利用innerhtml获取li的文本。实例演示如下:

1、HTML结构

<ul id="test">
<li>Glen</li>
<li>Tane</li>
<li>John</li>
<li>Ralph</li>
</ul>

2、javascript代码

window.onload = function()
var obj_lis = document.getElementById("test").getElementsByTagName("li");
for(i=0;i<obj_lis.length;i++)
obj_lis[i].onclick = function()
alert(this.innerHTML);


3、效果演示

追问

li标签还有拖拽排序事件呢

参考技术A 朋友这个问题最后你解决了么?

移动端拖拽

var move=document.getElementsByClassName("page1_2")[0];
    var startX=0;
    var startY=0;
    var x=0;
    var y=0;
    var off = 0;

    move.addEventListener("touchstart", function (e) {
        var e = e || event;
        off=1;
        startX = this.offsetLeft;
        startY = this.offsetTop;
        x=e.touches[0].pageX-startX;
        y=e.touches[0].pageY-startY;

    });

    document.addEventListener("touchmove", function (e) {
        var e = e || event;
        if (!off)return;
        var x1=e.touches[0].pageX-x;
        var y1=e.touches[0].pageY-y;
        if(x1<0){
            x1=0
        }
        if(y1<0){
            y1=0
        }
        if(x1>window.innerWidth-move.offsetWidth){
            x1=window.innerWidth-move.offsetWidth
        }
        if(y1>window.innerHeight-move.offsetHeight){
            y1=window.innerHeight-move.offsetHeight
        }
        move.style.left=x1+‘px‘;
        move.style.top=y1+"px";
});

        document.addEventListener(‘touchend‘, function (e) {
            off = 0;
        });

 

以上是关于Sortable.js移动端拖拽排序的容器li标签里含有其他点击事件如何写的主要内容,如果未能解决你的问题,请参考以下文章

Sortable.js 拖拽导致移动端不能点击问题

移动端拖拽

关于移动端拖拽

html5移动端拖拽

移动端拖拽(模块化开发,触摸事件,webpack)

pc端移动端拖拽实现