jQuery的拖放

我從這個網頁::jQuery的拖放

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

我得到的頁面這樣而已。不過的物品撿起這個代碼（DragandDrop.jsp）都不能拖動，我可以」把它們放到特定的購物車中。在我看來，我必須編寫一個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>

來源

2012-03-02 Shantanu Tomar

如果你只是想把你的代碼放在jquery onload中，那麼@Marek Karbarz會幫助你。 – 2012-03-02 06:21:28

把你的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>

來源

2012-03-02 06:13:15

謝謝你，先生......！它的工作... :) – 2012-03-02 06:23:21

你也可以寫如$（function（）{// Your code}）;代替$（document）.ready（function（）{// Your code}）; – 2012-03-02 06:25:00

@ user1230183：不要忘記標記這個問題爲答案.. :) – 2012-03-02 06:26:18

回答

相關問題