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

Question

我这里有一个简单的可拖动函数，我正在将其用于数学游戏我试图让我的数字出现在一行中但目前使用下面的代码它们看起来像这样堆叠在一起 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>

我只是用一个功能测试所有功能，看看我是否可以将它们放入行中。谢谢你的帮助

Answer 1

使用float: left;使其水平。

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

Fiddle

Answer 2

首先，您的 HTML 中有多个具有相同 ID draggable1 的元素。 Javascript 将无法识别所有这些。如果您需要 select 多个元素，请考虑使用 class select 或相反，这将允许您一次 select 所有元素。然后你的 javascript 会变成：

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

您将能够拖动所有元素。

接下来，您的 CSS 设置为影响 ID 为：draggable 的元素（有 none）。相反，您应该使用相同的 class select 或之前（因为有多个），这将更改为：

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

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

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

Answer 3

您需要确保将 float: left 添加到 CSS 以确保元素从左侧开始并保持水平。您还必须确保每个元素都继承了此 class。您的代码使用了 draggable ID，您的 none 元素继承了该 ID。此外，元素 ID 应该不同，所以我在下面的修改代码中让每个元素都有一个唯一的 ID，并将 CSS 类型更改为 class:

<!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>

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

Jquery UI Draggable items appearing in one row

html

javascript

jquery

jquery-ui

web-applications