为什么我的内容不可拖动

Why isn't my content draggable?

本文关键字：拖动 我的 为什么      更新时间：2023-09-26

我写了这段代码，它应该使屏幕上的内容可拖动。我之前使用可拖动的内容创建了一个应用程序，然后将该功能所需的部分复制到此应用程序中。有人可以帮我看看它，告诉我哪里出了问题或一些建议吗？

<td-cards class="card1 shadow" ng-repeat="card in cards | filter:{checked:true}" ng-click="openModal(card)">
  <td-card class="card-{{card.index}} shadow">
    <h4 class="h4-title"> {{ card.title }}</h4>
    <div class="image">
      <img ng-src="{{card.src}}"/>
    </div>
  </td-card>
</td-cards>

.JS：

$(function () {
       $(".card1").draggable({
       });
       $(".theLabel").draggable({
       });
    });

我怀疑它在 JS 中......您在class="card-{{card.index}} shadow"类声明中有一个 - 。

$(function () {
   $(".card-1").draggable({
   });
   $(".theLabel").draggable({
   });
});

在 HTML 代码中看不到.theLabel。

尝试使用这个：因为你正在使用动态class=card-1,..

$(function () {
      $("[class^=card-]").each(function(){
               $( this ).draggable({});
             });
       $(".theLabel").draggable({
       });
    });

这将向所有具有类名的元素添加dragabble like card-

由于您使用的是混合移动应用程序，我相信您的问题是您没有包含jQuery UI触摸冲击。

目前，jQuery UI 用户界面库不支持在其小部件和交互中使用触摸事件。这意味着您在桌面浏览器中设计和测试的光滑 UI 将在大多数（如果不是全部）支持触摸的移动设备上失败，因为 jQuery UI 侦听鼠标事件（鼠标悬停、鼠标移动和鼠标退出）而不是触摸事件（触摸启动、触摸移动和触摸结束）。

这就是jQuery UI Touch Punch的用武之地。触摸打孔的工作原理是使用模拟事件将触摸事件映射到其鼠标事件模拟。只需在页面上包含脚本，触摸事件就会转换为相应的鼠标事件，jQuery UI 将按预期响应这些事件。

相关文章：