Jquery Перетаскивания

Я взял этот код (DragandDrop.jsp) с этой страницы ::Jquery Перетаскивания

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

Я получаю страницу так only.But элементов не перетаскивать и я могу» t поместите их в определенную корзину покупок. Мне кажется, что мне нужно написать функцию запроса 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 поможет вам. –

Поместите свой яваскрипта код в $(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

Спасибо, что сэр ... !! Это сработало ... :) –

Вы также можете написать как $ (function() {// Ваш код}); вместо $ (document) .ready (function() {// Ваш код}); –

@ user1230183: Не забудьте отметить этот вопрос, как ответили .. :) –

Jquery Перетаскивания

ответ

Смежные вопросы