Jquery UI显示在一行中的可拖动项

Jquery UI Draggable items appearing in one row

本文关键字：一行 拖动 显示 UI Jquery      更新时间：2023-09-26

我在数学游戏中使用了一个简单的可拖动函数，我正试图让我的数字出现在一行中，但现在下面有了这个代码，它们看起来像这样堆叠在一起1.2.3.4.我如何让他们成为这样的12 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>

我只是用一个函数测试所有的函数，看看我是否能把它们放到行中。感谢您的帮助

使用float: left;使其水平。

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

Fiddle

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

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

并且您将能够拖动所有元素。

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

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

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

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

您需要确保将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>
相关文章：