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;
  }

小提琴

Answer 2

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

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

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

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

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

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

另外，您应该尝试将HTML，CSS和Javascript分离到单独的文件中，以使逻辑随着应用程序的增长而变得与众不同。 这被认为是好的风格。

Answer 3

您将要确保在CSS上添加float: left ，以确保元素从左侧开始并保持水平。 您还必须确保对每个元素都继承此类。 您的代码使用draggable 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>

jQuery UI可拖动项显示在一行中

问题描述

3 个解决方案

解决方案1
0 2015-11-25 04:31:36

解决方案2
0 2015-11-25 04:32:09

解决方案3
-1 已采纳 2015-11-25 04:32:32

jQuery UI可拖动项显示在一行中

问题描述

3 个解决方案

解决方案1 0 2015-11-25 04:31:36

解决方案2 0 2015-11-25 04:32:09

解决方案3 -1 已采纳 2015-11-25 04:32:32

解决方案1
0 2015-11-25 04:31:36

解决方案2
0 2015-11-25 04:32:09

解决方案3
-1 已采纳 2015-11-25 04:32:32