显示在一行中的Jquery可拖动项
显示在一行中的Jquery可拖动项
提问于 2015-11-24 20: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-24 20: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-24 20:31:36
Stack Overflow用户
发布于 2015-11-24 20: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
复制相关文章
![在 Flutter 中创建可拖动的浮动操作按钮[Flutter专题15]](https://ask.qcloudimg.com/http-save/yehe-6702670/c296a9d727da9ccc4df3a9192e52d294.png)
点击加载更多
相似问题
在jquery ui中访问可拖动项
jquery overscroll +可拖动项
JQuery可拖动项在droppable.append上的droppable中消失(可拖动)
在滚动可拖动项的内容时禁用jQuery拖动
显示嵌套项列表中可拖动项的计数
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
