Jquery UI 可拖动项目出现在一行中答案

【问题标题】：Jquery UI Draggable items appearing in one rowJquery UI 可拖动项目出现在一行中
【发布时间】：2016-02-27 18:10:56
【问题描述】：

我在这里有一个简单的可拖动函数，用于数学游戏 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>

我只是用一个函数测试所有这些，看看我是否可以让它们进入行。谢谢你的帮助

【问题讨论】：

您能否附上一张显示您当前正在查看的内容的屏幕截图？
只是我的图像在屏幕的左侧像这样 1 一直向下
我不清楚您遇到了什么问题。你能试着改写你的问题吗？
我将发布屏幕截图
ID 总是唯一的。请先将您的 draggable1 id 更改为 class。

标签： javascript jquery html jquery-ui web-applications

【解决方案1】：

使用float: left; 使其水平。

.draggable1 img { 
       width: 150px; 
       height: 150px; 
       padding: 0.5em;
       float: left;
  }

Fiddle

【讨论】：

是 .与 #draggable { width: 150px; 中的 # 相同高度：150px；填充：0.5em； }
我已经添加了工作小提琴，你可以在那里检查其余的代码。

【解决方案2】：

首先，您的 HTML 中有多个具有相同 ID draggable1 的元素。 Javascript 将无法识别所有这些。如果您需要选择多个元素，请考虑使用类选择器，这将允许您一次选择所有元素。然后您的 javascript 将更改为：

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

您将能够拖动所有元素。

接下来，您的 CSS 设置为影响 ID 为：draggable（没有）的元素。相反，您应该在之前使用相同的类选择器（因为有多个），这将变为：

.draggable1 { width: 150px; height: 150px; padding: 0.5em; }

最后，如果您需要它们并排开始，而不是堆叠在一起，请考虑将它们向左浮动：float: left。

此外，您应该尝试将 HTML、CSS 和 Javascript 分离到单独的文件中，以随着应用程序的增长保持逻辑的不同。这被认为是好的风格。

【讨论】：

【解决方案3】：

您需要确保将 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>

【讨论】：