相关疑难解决方法(0)

html5 draggable隐藏原始元素

当开始使用HTML5 draggable属性拖动元素时,原始元素仍然可见,因此我最终得到两个可见的元素而不是一个.

如何只拖动可见的元素(原始元素应暂时隐藏).

<script>
  function startDrag() {
    // hide initial element
  }

  function endDrag() {
    // reset initial element
  }
</script>

<div class="draggable" draggable="true"
  ondragstart="startDrag(event)"
  ondragend="endDrag(event)"
></div>
Run Code Online (Sandbox Code Playgroud)

这是一个显示问题的jsfiddle https://jsfiddle.net/gjc5p4qp/

javascript html5 draggable html5-draggable

15
推荐指数
4
解决办法
8182
查看次数

在w/jQuery上拖动时,将CSS类添加到元素中

是否可以在元素被拖动到特定区域时向元素添加CSS类,并在元素被删除后替换类?

我不是到处寻找这个功能,而只是在特定区域.

javascript css jquery

11
推荐指数
2
解决办法
2万
查看次数

HTML5移动拖放

这是我对WHATWG HTML5 拖放的实现:

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.innerHTML+=" <p>"+document.getElementById(data).innerHTML+"</p>";
}
Run Code Online (Sandbox Code Playgroud)
.div {
    width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;
}
Run Code Online (Sandbox Code Playgroud)
<div class="div" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div class="div" ondrop="drop(event)" ondragover="allowDrop(event)">
    <button id="drag1" draggable="true" ondragstart="drag(event)" width="336" height="69">Code</button>
    <button id="drag2" draggable="true" ondragstart="drag(event)" width="336" height="69">Code</button>
</div>
Run Code Online (Sandbox Code Playgroud)

它可以在Google Chrome浏览器中正常运行,但不能在iOS或Android中运行。我已经阅读了有关此主题的其他主题,但是其中大多数建议使用jQuery或JavaScript插件。

是否可以使HTML拖放实现在iOS和Android(移动设备)上工作?

html javascript mobile html5 drag-and-drop

4
推荐指数
2
解决办法
9186
查看次数

样式拖鬼元素

我正面临一个问题,我正在拖动一个 div。

虽然幽灵元素在 MacOs 上看起来不错(在 Chrome 和 FireFox 上都是如此),但在 Windows 中似乎太透明了(在 Chrome 和 FireFox 上都是如此。我尝试了多种方法,但似乎没有任何效果。所以是否可以设置样式幽灵元素?

此外,我尝试在旅途中制作该元素的图像,并将其用作幽灵拖动图像,但透明度问题仍然存在。

html javascript css drag-and-drop html5-draggable

3
推荐指数
1
解决办法
3635
查看次数