相关疑难解决方法(0)

Javascript拖放触摸设备

我正在寻找适用于触摸设备的拖放插件.

我想要与jQuery UI插件类似的功能,它允许"droppable"元素.

jqtouch插件支持拖动操作,但没有落下.

是拖放,只支持iPhone/iPad.

任何人都可以指向一个适用于android/ios的拖放插件的方向吗?

...或者有可能更新jqtouch插件的droppability,它已经在Andriod和IOS上运行.

谢谢!

javascript jquery jquery-ui touch

116
推荐指数
5
解决办法
13万
查看次数

使用移动设备的触摸事件模拟拖放事件

前段时间,我在移动设备上的网络浏览器中进行拖放操作时遇到了困难。默认的 JavaScript 事件在移动设备上不起作用。您只能使用触摸事件。

就我而言,我需要通过拖放来交换两个图像以及 ID。这里有一个例子:

div{
  display:inline-block;
  border:1px solid #0b79d0;
}

div, img{
        width:120px;
        height:120px;
    }
Run Code Online (Sandbox Code Playgroud)
<div id="1" ondragover="allowDrop(event)" ondrop="drop(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" draggable="false">
    <img id="a" draggable="true" ondragstart="dragStart(event)" src="https://static.webshopapp.com/shops/073933/files/156288269/345x345x1/artibalta-white-tiger.jpg"/>
</div>

<div id="2" ondragover="allowDrop(event)" ondrop="drop(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" draggable="false">
    <img id="b" draggable="true" ondragstart="dragStart(event)" src="https://yt3.ggpht.com/a-/AN66SAyfsmao4f1EEOqkBP2PgpSUcabPJXLZ1sLEnA=s288-mo-c-c0xffffffff-rj-k-no"/>
</div>

<div id="3" ondragover="allowDrop(event)" ondrop="drop(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" draggable="false">
    <img id="c" draggable="true" ondragstart="dragStart(event)" src="https://kinderbilder.download/wp-content/uploads/2018/10/animals-for-dolphin-drawings-pencil-drawings-pinterest-verwandt-mit-delfine-zeichnen-100x100.jpg"/>
</div>

<script>
    function allowDrop(ev){
        ev.preventDefault();
    }

    function dragEnter(ev){
        var element = document.getElementById(ev.target.id);
        element.style.border = "dotted";
        element.style.borderColor = "#0b79d0";
    }

    function dragLeave(ev){
        var element = document.getElementById(ev.target.id);
        element.style.border …
Run Code Online (Sandbox Code Playgroud)

javascript mobile drag-and-drop touch-event

5
推荐指数
1
解决办法
1万
查看次数