0

ドラッグ可能な要素ごとに異なる名前を付ける必要がありますか? ドラッグできるようにしたい3つの画像があります。私はそれらすべてに同じ ID を与えようとしましたが、失敗しました。可変数の画像があるため、すべて同じIDを持つ必要があります。ここで何がうまくいかないのですか？

これが私のコードです：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; border:1px solid black;}
</style>
<script>
$(document).ready(function(){
  $("#draggable").draggable();
});
</script>
</head>
<body>
<img id="draggable" src="small/Koala.jpg"/>
<img id="draggable" src="small/Desert.jpg"/>
<img id="draggable" src="small/Tulips.jpg"/>
</body>
</html>

今はクローンしません-イメージをクローンして、クローンをドロップ可能なボックスにドロップしたいです。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Wall Builder</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <style>
        .draggable { width: 85px; height: 85px; padding: 0.5em; border:1px solid black;}
        .droppable { width: 150px; height: 150px; padding: 0.5em; border:1px solid black;}
        </style>
    <script>
    $(document).ready(function() {
      $(".draggable").draggable({
        revert: "invalid"
       ,helper: 'clone'
      });
      $( ".droppable" ).droppable({
        accept: "draggable"
      });
    });
    </script>
</head>
<body>
<img class="draggable" id="1" src="small/Koala.jpg"/>
<img class="draggable" id="2" src="small/Desert.jpg"/>
<img class="draggable" id="3" src="small/Tulips.jpg"/>
<div class="droppable" id="d1"></div>
<div class="droppable" id="d2"></div>
<div class="droppable" id="d3"></div>
<div class="droppable" id="d4"></div>
<div class="droppable" id="d5"></div>

</body>
</html>
4

1 に答える 1

2

それらに異なるIDを与えてから、クラスごとに選択する必要があります。ID のポイントは、区別することです。重複がある場合、jQuery は最初に見つかったものを選択します。

何かのようなもの：

<script>
$(document).ready(function(){
  $(".draggable").draggable();
});
</script>
</head>
<body>
<img class="draggable" src="small/Koala.jpg"/>
<img class="draggable" src="small/Desert.jpg"/>
<img class="draggable" src="small/Tulips.jpg"/>
</body>
</html>

( ids と classes の違いを読みたいと思うかもしれません)

于 2012-12-21T18:49:27.853 に答える