Question

我刚开始学习javascript并使用jquery draggable创建了一个拖放。

演示在这里：

http://www.vwardv.com/doll6.html

我找不到一个教程，所以我只是去了jquery网站，并参与了改编演示。它可以工作，但我不知道我是否按照实际编码的方式对其进行了编码。如果你能看到任何你会改进的东西，我真的很感激。

以下是代码：

<!doctype html>
<html lang="en">
<head>


<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>


<script>
$(function() {
    $( "#draggable" ).draggable()
});
</script>

<script>
$(function() {
    $( "#draggable2" ).draggable();
});
</script>

<script>
$(function() {
    $( "#draggable3" ).draggable();
});
</script>

<script>
$(function() {
    $( "#draggable4" ).draggable();
});
</script>

<script>
$(function() {
    $( "#draggable5" ).draggable();
});
</script>


</head>
</body>

<div id="bodies/palepd.gif">
<img src="bodies/palepd.gif" class="ui-widget-content" id="draggable">
<img src="bodies/trousers.gif" class="ui-widget-content" id="draggable2">
<img src="bodies/top.gif" class="ui-widget-content" id="draggable3">
<img src="bodies/dress.gif" class="ui-widget-content" id="draggable4">
<img src="bodies/coat.gif" class="ui-widget-content" id="draggable5">
</div>

谢谢

维克

更新*

感谢您的所有建议，我真的很感激。我现在根据你的建议调整了代码。让我知道，如果我误解了任何事情，或者我还有什么可以改进的话。谢谢

<!doctype html>
<html lang="en">
<head>


<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>


<script>
$(document).ready(function() {
    $( ".mydraggable" ).draggable();
});
</script>


</head>
<body>

<div id="items">
<img src="bodies/palepd.gif" class="mydraggable">
<img src="bodies/trousers.gif" class="mydraggable">
<img src="bodies/top.gif" class="mydraggable">
<img src="bodies/dress.gif" class="mydraggable">
<img src="bodies/coat.gif" class="mydraggable">
</div>


</body>

* 更新2

任何人都可以告诉我为什么我应该'ui-widget-content'而不是'mydraggble'？

现在我需要继续下一个阶段，即订购物品，例如，你可以在夹克后面放一个等等。

我需要在页面上添加两个按钮：一个将向上移动一个图层/图层，一个将向下移动图层/图层。这显然意味着为了清楚起见，我需要建立一些指示选择哪个项目的方法。任何人都能指出我对这两件事中的任何一件都是正确的方向吗？

再次感谢

Answer 1

我认为你可以简单地在一个jQuery选择器中调用所有对象：

$('.ui-widget-content').draggable();

Answer 2

最好用一个替换这5个单独的脚本块：

<script>
$(document).ready(function() {
  $( "#draggable, #draggable2, #draggable3, #draggable4, #draggable5" ).draggable()
});
</script>

更好的方法是为页面上的每个可拖动元素提供一个“mydraggable”类，并将它们替换为：

<script>
    $(document).ready(function() {
      $( ".mydraggable" ).draggable()
    });
</script>

Answer 3

非常好：）

</body>应为<body>，然后将其关闭并在结尾处</html>。

<div id="bodies/palepd.gif">

这是一个无效的ID。

将所有内联脚本块合并为一个块：

$(function() {
    $( "#draggable1, #draggable2, #draggable3, #draggable4, #draggable5" ).draggable();
});

Answer 4

第一件事就是我拥有的就绪事件处理程序的数量。 $(function() { ...的每个实例都是一个就绪事件处理程序，在DOM准备好进行操作时执行。

当一个人满足时，没有必要这么多：

$(function() {
    $( "#draggable" ).draggable()
    $( "#draggable2" ).draggable();
    $( "#draggable3" ).draggable();
    $( "#draggable4" ).draggable();
});

下一个问题是函数体第一行缺少分号。虽然这不是一个主要问题，但我总是建议在一行末尾加上分号。如果你不这样做，你可能会在以后遇到令人困惑的问题。

接下来，您可以用一条更短的线替换这4条线。由于所有4个元素共享一个公共类，您可以使用类选择器来匹配所有这些：

$(function() {
    $(".ui-widget-content").draggable();
});

此外，您永远不会打开<body>元素，只关闭它。将</body>更改为<body>并在结尾处将其关闭。

最后，如果src元素上没有<script>属性，则必须存在type属性。当您在<script>元素中编写JavaScript代码时，需要type text/javascript。其他HTML有效性问题是<title>元素上缺少alt元素和缺少<img>属性。

总而言之，我会将您的代码更改为：

<!doctype html>
<html lang="en">
<head>
    <title>Some title</title>
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $(".ui-widget-content").draggable();
        });
    </script>
</head>
<body>
    <div id="bodies/palepd.gif">
        <img src="bodies/palepd.gif" class="ui-widget-content">
        <img src="bodies/trousers.gif" class="ui-widget-content">
        <img src="bodies/top.gif" class="ui-widget-content">
        <img src="bodies/dress.gif" class="ui-widget-content">
        <img src="bodies/coat.gif" class="ui-widget-content">
    </div>
</body>
</html>

我的第一次拖放，它的工作原理，但这是最好的做法吗？

4 个答案: