Question

我从这个页面中选择了这个代码（DragandDrop.jsp）::

http://jsfiddle.net/petersendidit/S4QgX/

我正在获取此类页面。但是这些项目不可拖动，我无法将它们放到特定的购物车中。在我看来，我必须写一个onload（）j查询函数，以便为我的代码中的代码实现这一点，但我不知道如何做到这一点。或者可能是另一个错误。我只在页面中放入了css代码，而不是将其作为外部文件导入。请帮我解决问题。谢谢您的帮助。

DragandDrop.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
h1 { padding: .2em; margin: 0; }
#products { float:left; width:200px; height: 600px; margin-right: 20px; }
#products ul {list-style: disc; padding: 1em 0 1em 3em;}
.shoppingCart{ width: 200px; margin: 20px; float: left; }
/* style the list to maximize the droppable hitarea */
.shoppingCart ol { margin: 0; padding: 1em 0 1em 3em; list-style-type: decimal;  }
</style>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">

$("#products li").draggable({
    appendTo: "body",
    helper: "clone"
});
$(".shoppingCart ol").droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {
        var self = $(this);
        self.find(".placeholder").remove();
        var productid = ui.draggable.attr("data-id");
        if (self.find("[data-id=" + productid + "]").length) return;
        $("<li></li>", {
            "text": ui.draggable.text(),
            "data-id": productid
        }).appendTo(this);
        // To remove item from other shopping chart do this
        var cartid = self.closest('.shoppingCart').attr('id');
        $(".shoppingCart:not(#"+cartid+") [data-id="+productid+"]").remove();
    }
}).sortable({
    items: "li:not(.placeholder)",
    sort: function() {
        $(this).removeClass("ui-state-default");
    }
});
</script>
</head>
<body>
<div id="products">
    <h1 class="ui-widget-header">Product list</h1>
    <div class="ui-widget-content">
        <ul>
            <li data-id="1"> product 1 </li>
            <li data-id="2"> product 2 </li>
            <li data-id="3"> product 3 </li>
            <li data-id="4"> product 4 </li>
            <li data-id="5"> product 5 </li>
        </ul>
    </div>
</div>

<div id="shoppingCart1" class="shoppingCart">
    <h1 class="ui-widget-header">Shopping Cart 1</h1>
    <div class="ui-widget-content">
        <ol>
            <li class="placeholder">Add your items here</li>
        </ol>
    </div>
</div>
<div id="shoppingCart2" class="shoppingCart">
    <h1 class="ui-widget-header">Shopping Cart 2</h1>
    <div class="ui-widget-content">
        <ol>
            <li class="placeholder">Add your items here</li>
        </ol>
    </div>
</div>
</body>
</html>

Answer 1

将您的javascript代码放在$(document).ready块中。就像现在一样，当你的javascript代码执行时，页面上还没有呈现任何元素，所以jQuery没有任何东西要绑定。 $(document).ready仅在页面呈现后才会执行，因此您的产品和购物车可供jQuery使用，以使其可拖动/可拖放。

<script type="text/javascript">
$(document).ready(function() {
    $("#products li").draggable({
        appendTo: "body",
        helper: "clone"
    });
    $(".shoppingCart ol").droppable({
        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        drop: function(event, ui) {
            var self = $(this);
            self.find(".placeholder").remove();
            var productid = ui.draggable.attr("data-id");
            if (self.find("[data-id=" + productid + "]").length) return;
            $("<li></li>", {
                "text": ui.draggable.text(),
                "data-id": productid
            }).appendTo(this);
            // To remove item from other shopping chart do this
            var cartid = self.closest('.shoppingCart').attr('id');
            $(".shoppingCart:not(#"+cartid+") [data-id="+productid+"]").remove();
        }
    }).sortable({
        items: "li:not(.placeholder)",
        sort: function() {
            $(this).removeClass("ui-state-default");
        }
    });
});
</script>

Jquery拖放

1 个答案: