jQuery具有相同ID的可拖动多个项目不起作用 [英] JQuery Draggable Multiple Items with the same id not working
问题描述
您需要为每个可拖动元素赋予不同的名称吗?我有3张图片，希望能够拖动它们.我试图给他们所有相同的ID，但失败了.我将使用可变数量的图像，因此我需要它们全部具有相同的ID.这里出了什么问题?
Do you need to give each draggable element a different name? I have 3 images I want to be able to drag them around. I tried to give them all the same id but it fails. I will have a variable number of images so I need them all to have the same id. What is going wrong here?
这是我的代码:
<!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>
现在它不会克隆-我想克隆图像并将克隆放到可放置的盒子中.
Now it will not clone - I want to clone the image and drop the clone into the droppable box.
<!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>
推荐答案
您需要为他们提供不同的ID，然后按类别进行选择. id的要点是不同的，如果重复，则jQuery将选择它找到的第一个.
You need to give them different ids and then select by class. The point of an id is to be distinct, and if there are duplicates jQuery will just select the first one it finds.
类似的东西:
<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>
(听起来像您可能想在 id和class之间的区别)
(sounds like you might want to read up on the difference between ids and classes)
这篇关于jQuery具有相同ID的可拖动多个项目不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
