jquery touch punch z 索引没有影响

Posted

技术标签:

【中文标题】jquery touch punch z 索引没有影响【英文标题】:jquery touch punch z index has no impact 【发布时间】:2016-09-21 21:58:57 【问题描述】:

我正在处理 ipad 拖放,我试图使可拖动元素在每个其他 div 上可见,但它仅在父 div 中有效,我的代码是:

$('#draggable').draggable(
  zIndex: 20,
  drag: function(event)...,
  helper: 'clone',
  position: 'absolute',
  owerflow: 'hidden'
)

html 代码如下所示:

<tr>
  <td>
    <div id="draggable"></div>
  </td>
  <td>
    <div id="dropDiv"></div>
  </td>
</tr>

当我拖动元素时,它在通常所在的第一个 td 中可见,但是当我尝试将其拖动到 &lt;div id="dropDiv"&gt;&lt;/div&gt; 上时,它会位于“dropDiv”下方。

这些 div 和 td 有多个我无法在此处显示的 css 类。

我已经尝试了多个 z 索引,但没有任何影响。

【问题讨论】:

我不确定,但您可以尝试使用 10 位数字的 z 索引。 如果我没记错的话,jqueryUI 曾经定义的最高 z-index 是一个 9 位数字 或者 11,如果它仍然不起作用 我用 999999999 和 9999999999 都试过了,但还是不行 【参考方案1】:

您可以像这样添加自定义助手:

$('#draggable').draggable(
  zIndex: 20,
  drag: function(event)...,
  helper: function()
    $("#outerElement").append($("#draggable").clone().attr('id', 'itWorks'))
    return $("#itWorks");
  ,
)

其中$("#outerElement") 是包含您的$("#draggable") 的元素以及您想要删除的元素。

【讨论】:

以上是关于jquery touch punch z 索引没有影响的主要内容,如果未能解决你的问题,请参考以下文章

JQuery UI Draggable 使用较新的 JQuery 3.3 失败(使用 JQuery UI Touch Punch)

jquery ui可拖动手机版

可拖动的 jquery ui 触摸防止专注于 Chrome 上的输入

用jquery修复IE Z索引

在 iPad Web App 上拖放 - 同时保留滚动功能

如何使用 JQuery 和 Sencha touch