显示在一行中的Jquery可拖动项
显示在一行中的Jquery可拖动项
提问于 2015-11-25 04:02:00
我在这里有一个简单的可拖动函数，用于一个数学游戏，我试图让我的数字出现在一行中，但是现在，下面的代码看起来像这个1，2，3，4这样堆叠在一起，如何使它们像这个1，2，3，4，5一样。
<!DOCTYPE html>
<html>
<head>
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script>
$(function() {
$( "#draggable1" ).draggable();
});
</script>
</head>
<body>
<div id="draggable1" class="ui-widget-content">
<p><img src="mypicturesurl.com is here;"></p>
</div>
<div id="draggable1" class="ui-widget-content">
<p><img src="mypictureurl.com;"></p>
</div>
<div id="draggable1" class="ui-widget-content">
<p><img src="Samepictureurl.com;"></p>
</div>
</body>我只是用一个函数来测试所有这些函数，看看是否能让它们进入行。谢谢你的帮助
回答 3
Stack Overflow用户
回答已采纳
发布于 2015-11-25 04:32:32
您需要确保将float: left添加到您的CSS中，以确保元素从左侧开始并保持水平。还必须确保使用每个元素继承该类。您的代码使用了draggable ID，您的任何元素都没有继承该ID。此外，元素ID应该是不同的，因此我使每个元素在下面的修改代码中有一个唯一的ID，并将CSS类型更改为一个类：
<!DOCTYPE html>
<html>
<head>
<style>
.draggable { width: 150px; height: 150px; padding: 0.5em; float: left;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script>
$(function() {
$( "#draggable1" ).draggable();
});
</script>
</head>
<body>
<div id="draggable1" class="draggable ui-widget-content">
<p><img src="mypicturesurl.com is here;"></p>
</div>
<div id="draggable2" class="draggable ui-widget-content">
<p><img src="mypictureurl.com;"></p>
</div>
<div id="draggable3" class="draggable ui-widget-content">
<p><img src="Samepictureurl.com;"></p>
</div>
</body>
</html>Stack Overflow用户
发布于 2015-11-25 04:31:36
Stack Overflow用户
发布于 2015-11-25 04:32:09
首先，您的HTML中有多个ID为draggable1的元素。Javascript将无法识别所有这些代码。如果需要选择多个元素，请考虑使用类选择器，这将允许您同时选择所有元素。然后您的javascript将更改为：
$(function() {
$( ".draggable1" ).draggable();
});你就能拖动你所有的元素。
接下来，您的CSS被设置为使用ID：draggable影响元素(没有)。相反，您应该在前面使用相同的类选择器(因为有多个类)，这将更改为：
.draggable1 { width: 150px; height: 150px; padding: 0.5em; }最后，如果您需要它们并排启动，而不是堆叠在一起，那么可以考虑将它们放在左边：float: left。
此外，您还应该尝试将HTML、CSS和Javascript分离到单独的文件中，以便在应用程序增长时保持逻辑的独特性。这被认为是很好的风格。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33908284
复制相关文章
相似问题
腾讯云开发者
