Question

我试图了解它是如何协同工作的，

我有css：

#navWrap #nav #drag {
    width: 500px;
    height: auto;
    position: absolute;
    left: 300px;
    top: 200px; /* Or perhaps different coordinates */
    display: none;
    background-color: #939393;

in html：

<div id="drag">
 <img id="content_display" alt="" src="../../gfx/elements/ship_1.png"/>
</div>

在js：

$(function() 
        {
            $( "#drag" ).draggable();
        });

如果我使用div id“拖”2次，它不起作用，所以我需要复制所有代码，并使用新的id？比如drag_2 drag_3？

如果我这样做，那就有效。

解决此问题的最佳方法是什么？

Answer 1

您不能多次使用相同的ID，最好使用类似.drag的类。

Answer 2

FLCL说的是，如果class：

，则使用id

HTML：

<div class="drag">
 <img id="content_display" alt="" src="../../gfx/elements/ship_1.png"/>
</div>

JS：

   $(function() 
    {
        $( ".drag" ).draggable();
    });

Answer 3

了解选择器。您可以按ID，按类和许多其他内容进行选择，它们的工作方式与CSS选择器非常相似。例如，在div中添加一个类

<div class='myDraggableDiv'>...</div>

允许你做

$(".myDraggableDiv").draggable(...)

如果所有div都在父div中，例如

<div id="draggableStuff">
    <div id="draggable1">...</div>
    <div id="draggable2">...</div>
    ...
</div>

你可以这样做（选择#draggableStuff的直接div子项）

$("#draggableStuff > div").draggable("...")

无论如何，看看选择器如何工作并选择最适合您需求的选择器。

Answer 4

我执行此操作的方式是使用div-id捆绑图片，您可以通过<img> <div>中的所有$('#id > img')

查看selectors了解更多信息......

＆＃13;

$(document).ready(function() {
  $('#drag > img').draggable();
});

＆＃13;

#navWrap #nav #drag {
  width: 500px;
  height: auto;
  position: absolute;
  left: 300px;
  top: 200px;
  /* Or perhaps different coordinates */
  display: none;
  background-color: #939393;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>

<div id="drag">
  <img id="content_display" alt="" src="https://cdn4.iconfinder.com/data/icons/dot/256/ship_sea_ocean.png" />
  <img id="content_display" alt="" src="https://cdn4.iconfinder.com/data/icons/dot/256/ship_sea_ocean.png" />
  <img id="content_display" alt="" src="https://cdn4.iconfinder.com/data/icons/dot/256/ship_sea_ocean.png" />
</div>

＆＃13;

Javascript，初学者：几个元素上的可拖动函数

4 个答案: