Question

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

<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({
       });
    });

Answer 1

我怀疑它在JS中......你在class="card-{{card.index}} shadow"类声明中得到了 - 。

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

请勿在HTML代码中看到.theLabel。

Answer 2

尝试使用此功能：因为您正在动态使用class=card-1,..

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

这会将dragabble添加到具有类名like card-

的所有元素

Answer 3

由于您正在使用混合移动应用，我相信您的问题是您还没有jQuery UI touch punch.

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

jQuery UI Touch Punch的用武之地.Touch Punch的工作原理是使用模拟事件将触摸事件映射到鼠标事件类似物。只需在页面上包含脚本，您的触摸事件就会变成相应的鼠标事件，jQuery UI将按预期响应。

为什么我的内容不可拖动？

3 个答案: