Question

在我目前的标记中，有一个<div>用作项目预览的容器，我想使用jQuery UI使其可拖动。

遵循本教程的基础知识，因为我从未做过这样的事情，所以这只是一个问题：

$( '#preview' ).draggable();

事实上，确实如此。我添加它并且它有效。

但是我需要一个稍微更具体的选择器，因此共享相同预览容器的其他东西也不会变得可拖动。

因此，在构建预览时，我添加了一个class来识别该组，即：

$( '#preview' ).removeClass().addClass( 'group_1' );

然后我对使用不同字符串的其他预览触发器（即group_2，group_3 ......）执行了相同操作。

检查Chrome中的预览元素，它应该完美地运行：所有类都从元素中删除，并添加新类。

认为这就是我所需要的，然后我将jQuery UI Selector更改为：

$( '#preview.group_1' ).draggable();

它停止了工作。

我应该注意哪些具体内容？

Answer 1

您没有提供太多示例。因此很难知道这是否是您正在寻找的。尝试：

$("#preview[class^='group_']").draggable();

这将适用于preview的ID和group_1, group_2, group_n之类的ID。查看更多：http://api.jquery.com/attribute-starts-with-selector/

同样，没有示例代码，很难知道它会捕获哪些元素。 ID应该是唯一的。例如，您提到只使用了一个<div>：

<div id="preview" class="group_1">
</div>

所以不清楚你为什么要改变这门课程。

您提到您有其他共享此父级的元素不应该是可拖动的。例如：

<div id="preview">
    <div class="thumb">
      <img src="image_thumb.job">
    </div>
    <div class="caption">
    </div>
</div>

当你致电$("#preview").draggable()时，这将使容器可以拖动，而不是内部的物品;除非，您已将'preview'设置为其他元素的ID，但不建议这样做。

<强>更新

考虑删除所有类的替代方法。

$("#preview").removeClass("group_1").addClass("group_2");

这样可以防止ui-draggable被删除。您也可以更深入地寻求：

$("#preview").removeClass(function(i, c) {
  if (c.indexOf("group_") !== -1) {
    var res = c.split(" ");
    $.each(res, function(k, v){
      if(v.indexOf("group_") === 0){
        return v;
      }
    });
  }
}

这将只删除一个以group_开头的类，或者可以调整它以适应其他情况。或者除去以外的所有内容：

$("#preview").removeClass(function(i, c) {
  if (c.indexOf("ui-draggable") >= 0) {
    var res = c.split(" ");
    $.each(res, function(k, v){
      if(v.indexOf("ui-draggable") === -1){
        return v;
      }
    });
  }
}

除了ui-draggable之外，这将删除所有类。您还可以使用索引i来仅查看大量元素中的特定元素。希望有所帮助。

jQuery Draggable与动态构造的选择器

1 个答案: