Javascript Jquery拖放
我从以下页面中获取了以下代码(DragandDrop.jsp): 我得到的只是这样的页面。但是物品是不可拖动的,我不能把它们放到特定的购物车上。在我看来,我必须为标记中的代码编写一个onload()j查询函数,但我不知道如何做到这一点。或者可能还有另一个错误。我只在页面中放置了css代码,而不是将其作为外部文件导入。请帮我查一下密码。谢谢你的帮助 DragandDrop.jspJavascript Jquery拖放,javascript,jquery-ui,Javascript,Jquery Ui,我从以下页面中获取了以下代码(DragandDrop.jsp): 我得到的只是这样的页面。但是物品是不可拖动的,我不能把它们放到特定的购物车上。在我看来,我必须为标记中的代码编写一个onload()j查询函数,但我不知道如何做到这一点。或者可能还有另一个错误。我只在页面中放置了css代码,而不是将其作为外部文件导入。请帮我查一下密码。谢谢你的帮助 DragandDrop.jsp <%@ page language="java" contentType="text/html; charse
<%@ 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>
h1{填充:.2em;边距:0;}
#产品{浮动:左;宽度:200px;高度:600px;右边距:20px;}
#产品ul{列表样式:光盘;填充:1em 0 1em 3em;}
.shoppingCart{宽度:200px;边距:20px;浮动:左;}
/*设置列表样式以最大化可拖放命中区域*/
.shoppingCart ol{margin:0;padding:1em 0 1em 3em;列表样式类型:decimal;}
在此处插入标题
$(“#产品li”).可拖动({
附:“身体”,
助手:“克隆”
});
$(“.shoppingCart ol”).可拖放({
activeClass:“ui状态默认值”,
hoverClass:“ui状态悬停”,
drop:函数(事件、用户界面){
var self=$(这是);
self.find(“.placeholder”).remove();
var productid=ui.draggable.attr(“数据id”);
if(self.find(“[data id=“+productid+”]).length)返回;
$(“”{
“text”:ui.draggable.text(),
“数据id”:产品id
}).附于(本);
//要从其他购物图表中删除项目,请执行以下操作
var cartid=self.closest('.shoppingCart').attr('id');
$(“.shoppingCart:not(#“+cartid+”)[data id=“+productid+”])。remove();
}
}).可排序({
项目:“li:非(.占位符)”,
排序:函数(){
$(this.removeClass(“ui状态默认”);
}
});
产品清单
- 产品1
- 产品2
- 产品3
- 产品4
- 产品5
购物车1
在此处添加您的项目
购物车2
在此处添加您的项目
将您的javascript代码放入$(文档)中。就绪
块。现在,当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>
$(文档).ready(函数(){
$(“#产品li”).可拖动({
附:“身体”,
助手:“克隆”
});
$(“.shoppingCart ol”).可拖放({
activeClass:“ui状态默认值”,
hoverClass:“ui状态悬停”,
drop:函数(事件、用户界面){
var self=$(这是);
self.find(“.placeholder”).remove();
var productid=ui.draggable.attr(“数据id”);
if(self.find(“[data id=“+productid+”]).length)返回;
$(“”{
“text”:ui.draggable.text(),
“数据id”:产品id
}).附于(本);
//要从其他购物图表中删除项目,请执行以下操作
var cartid=self.closest('.shoppingCart').attr('id');
$(“.shoppingCart:not(#“+cartid+”)[data id=“+productid+”])。remove();
}
}).可排序({
项目:“li:非(.占位符)”,
排序:函数(){
$(this.removeClass(“ui状态默认”);
}
});
});
如果您只是想将代码放到jquery onload中,那么@Marek Karbarz将帮助您。您也可以像$(function(){//your code})那样编写代码;代替$(document).ready(function(){//Your code});