JavaScript中，初級：幾個元素

-1

我正嘗試瞭解它是如何工作一起拖動功能，JavaScript中，初級：幾個元素

我在CSS：

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

在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？

如果我這樣做，它的工作原理。

解決此問題的最佳方法是什麼？

來源

2015-04-07 ReiRao

我不明白你有 –

標識哪些問題必須是唯一的。也許應用一個類（它不一定需要樣式化），並用它來標識可拖動的元素。 –

如果我們解決了這個問題，請標記你最喜歡的答案。 –

我會做的方式，它是一個div-ID捆綁的圖像，通過它可以訪問所有的<img>在<div>通過$('#id > img')

查找到selectors更多信息...

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

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

<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>

來源

2015-04-07 09:15:55

非常感謝您的解決方案。我會試着去理解它;） – ReiRao

您不能多次使用同一個ID，最好使用類如.drag。

來源

2015-04-07 09:09:31 FLCL

非常有用謝謝 – ReiRao

什麼FLCL說，使用class，而是如果id：

HTML：

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

JS：

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

來源

2015-04-07 09:12:07 Sajeeb

看一看進入選擇。你可以通過id，class和其他許多選項來選擇它們，它們的工作方式與CSS選擇器非常相似。例如，添加類到您的div

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

允許你做

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

如果所有的div是在父DIV，如

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

你可以做這個（選擇#draggableStuff的直接格子的孩子）

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

無論如何，請看看選擇器如何工作並選擇最適合您需求的工作。

來源

2015-04-07 09:14:25

新概念，謝謝，我開始明白了。 – ReiRao

JavaScript中，初級：幾個元素

回答

相關問題