还是js的问题 这个有点难度。。 PS:我要得到目标div的id 是因为我之后要判断碰撞。实现多拖动对象,多目标对象的碰撞 目前只能做到固定1个目标 多个拖动对象 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 HTML5有提供dragover事件,需先设置元素的graggable属性为true,jQuery UI的draggable也有类似的实现,具体实现方法是维护一个目标元素的数组,记录下位置信息,然后拖动的时候来检查当前元素与目标元素的关系。PS:LZ的图画得不错啊。 不能用HTML5 只用JS 实现 我提供下思路 首先要设置拖动div的onmousemove事件然后当拖动div的时候获取目标div的top 和left; 并计算出目标div所在的范围 因为拖动div 可以获取当前鼠标所在的位置 进行判断 我 说的只是鼠标到达目标div的判断如果你要在目标div和拖动div发生碰撞时获取值的话 就要计算出 当鼠标点击拖动div的时候的鼠标里拖过div的边缘的距离;这样基本就可以实现你想要的了 ; 至于获取值 其实很简单 我说下我的方法 首先促发拖动的div的时候 把拖动div的id赋给一个变量;拖动不同的div 值也会跟着改变 然后根据上面的方法 当发生碰撞的时候获取变量的值 记得当拖动div停止拖动的 时候要清除变量的值! 如上方法 可以试试! 改了个Demo给你,你按步骤来吧。1:将以下css保存为css.cssbody{ background-color:#777777; color:#FFFFFF; margin:0px; padding:18px 0 0 18px; font-size:12px; font-family:Arial, Helvetica, sans-serif;}.clear{clear:both;}.ui-sortable{ background-color:#FFFFFF; border:1px solid #555555; color:#222222; margin:0 15px 15px 0; padding:0 10px 10px;}.ui-sortable h2{ background-color:#555555; border-top:3px solid #666666; color:#FFFFD0; font-size:12px; margin:0 -10px 10px; line-height:2em; padding:0 10px;}dl.sort{ color:#222222; margin:10px 0px;}.dl-sort-placeholder{height:50px;border: 1px dashed red;background: #fbf9ee;color: #363636;}dl.sort dt{ background-color:#666666; color:#FFFFFF; cursor::default; height:2em; line-height:2em; padding:0px 6px; position:relative;}dl.sort dd{ background-color:#FFFFD8; margin:0px; padding:3px 6px; border-bottom:1px dotted #999999; border-left:1px dotted #999999; border-right:1px dotted #999999;}span.options{cursor:pointer; position:absolute; }.ui-sortable h2 span.options{right:8px; top:8px;position:relative;}dl.sort dt span.options{right:6px; top:5px;}#container{float:left;}#header{width:638px;}#content{float:left; width:400px;}#sidebar{float:left; width:200px;}#footer{width:638px;}#trashcan{ float:left; width:150px; height:100px; background-color:#CCCCCC;}#trashcan p{margin:0px;}2:将以下HTML保存为:drag.html[当然,别的也行]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>拖拽_demo</title> <link href="css.css" type="text/css" rel="stylesheet" /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script><script src="http://code.jquery.com/ui/1.8.23/jquery-ui.min.js" type="text/javascript"></script><script language="javascript" src="drag.js"></script></head><body id="uidemo"><button id="edit" onclick="pl.Start()">编辑</button><button id="Button1" onclick="pl.Destory()">停止</button> <div id="container"> <div id="header" class="ui-sortable"> <h2>头版头条</h2> <dl class="sort" id="a1"> <dt>我是 [dl:id=a1]</dt> <dd>2222222222222</dd> <dd>33333333333333</dd> </dl> </div> <div id="content" class="ui-sortable"> <h2>详细内容</h2> <dl class="sort" id="a2"> <dt>我是 [dl:id=a2]</dt> <dd>555555555555555555555</dd> <dd>6666666666666666666</dd> </dl> </div> <div id="sidebar" class="ui-sortable"> <h2>滚动新闻</h2> <dl class="sort" id="a3"> <dt>我是 [dl:id=a3]</dt> <dd>7777777777777</dd> <dd>8888888888888</dd> <dd>7777777777777</dd> <dd>8888888888888</dd> </dl> <dl class="sort" id="a4"> <dt>我是 [dl:id=a4]</dt> <dd>9999999999999</dd> <dd>aaaaaaaaaaaaaaa</dd> </dl> <dl class="sort" id="a5"> <dt>我是 [dl:id=a5]</dt> <dd>bbbbbbbb</dd> <dd>cccccccccccc</dd> </dl> </div> <div class="clear"></div> <div id="footer" class="ui-sortable"> <h2>页脚项</h2> <dl class="sort" id="a6"> <dt>我是 [dl:id=a6]</dt> <dd>eeeeeeeeeeeee</dd> </dl> </div> </div> <div id="trashcan" class="ui-sortable"> <h2>回收站</h2> </div></body></html>3:将以下js保存为:drag.jsvar PageLayout=function(){ this.moveUp = function(){ //向上移动子项目 var link = $(this), dl = link.parents("dl"), prev = dl.prev("dl"); if(link.is(".up") && prev.length > 0){dl.insertBefore(prev);} } this.addItem = function(){ //添加一个子项目 var sortable = $(this).parents(".ui-sortable"); var options = '<span class="options"><a class="up"><img src="up.gif" border="0"></a></span>'; var html = '<dl class="sort"><dt>Dynamic name'+options+'</dt><dd>Description</dd></dl>'; sortable.append(html).sortable("refresh").find("a.up").bind("click", this.moveUp); } this.emptyTrashCan = function(o){ //回收站 o.remove(); } this.sortableChange = function(e, ui){ for(i in e) { //alert(i+":"+e[i]) } if(ui.sender){ alert("警告!警告![dl:id="+ui.item.attr("id")+"] , 我是 [div:id="+$(this).attr("id")+"],你正在进入我的领空!\n\n你确定不怕我的炮火,要继续闯入吗?") var w = $(this).width(); ui.placeholder.width(w); ui.helper.css("width",$(this).children().width()); } } this.sortableUpdate = function(e, ui){ //更新模块(用户回收站清空后) if(this.id == "trashcan"){ ui.item.remove(); } } this.Start=function(){ //引用主页面中的所有块 var els = ['#header', '#content', '#sidebar', '#footer', '#trashcan']; var $els = $(els.toString()); //动态添加“增加子项目”、“向上移动”按钮 //$("h2", $els.slice(0,-1)).append('<span class="options"><a class="add"><img src="add.gif" border="0"></a></span>');//<span class="options"><a class="add"><img src="add.gif" border="0"></a></span> $("dt", $els).append('<span class="options" style="padding-right:20px;"><a class="up">向上</a></span>'); //绑定相关事件 //$("a.add").bind("click", this.addItem); $("a.up").bind("click", this.moveUp); $("dt").css("cursor","move"); //使用jQuery插件 $els.sortable( 'enable' ); $els.sortable({ items: '> dl', //拖拽对象 handle: 'dt', //可触发该事件的对象 cursor: 'move', //鼠标样式 opacity: 0.8, //拖拽时透明 appendTo: 'body', forcePlaceholderSize:false, revert:true, tolerance:'pointer', placeholder: 'dl-sort-placeholder', connectWith: els, start: function(e,ui) { //ui.helper.css("width","100"); //ui.helper.css("height","100"); }, change: this.sortableChange, update: this.sortableUpdate //用于回收站 }); } this.Destory=function(){ //引用主页面中的所有块 var els = ['#header', '#content', '#sidebar', '#footer', '#trashcan']; var $els = $(els.toString()); $els.sortable( 'refresh' ); $els.sortable( 'disable' ); }}pl=new PageLayout(); this.sortableChange = function(e, ui){ for(i in e) { //alert(i+":"+e[i]) }上面的for(i in e) { //alert(i+":"+e[i]) }可以删除你按上面的步骤做好以后,直接访问drag.html。然后点击右上角的编辑按钮,即可开始拖拽,点击停止按钮,即可让拖拽失效 为了让你看得更明白,在以上的代码上做如下修改:1:HTML中在:<div id="sidebar" class="ui-sortable"> <h2>滚动新闻</h2>下方添加:<dl class="sort" id="a7"> <dt>我是 [dl:id=a7]拖拽记录</dt> </dl>2:drag.js中将那条alert语句删除。修正sortableUpdate函数如下:this.sortableUpdate = function(e, ui){ //更新模块(用户回收站清空后) if(this.id == "trashcan"){ui.item.remove();}else{if(ui.sender){$("#a7").append("<dd>[dl:id="+ui.item.attr("id")+"] 被拖入 [div:id="+$(this).attr("id")+"] 容器中</dd>")}} }修正目的:增加了一个容器去记录所有的有效拖拽操作,[注意:在当前容器中发生的排序操作将不被记录] jscharts.js如何去掉logo的方法 Div展开效果,代码不多,希望大大们帮忙看看问题在哪? JS拖拽后吧X,Y坐标写入数据库问题! ff乱码问题,非常着急,指点指点吧。 【高难度】如何获得父框架的JS变量值 thickbox 如何跨越 frameset?? 如何使用js从数据库动态的载入图片 一个简单的时间比较问题(javascript) 用javasctipt写一个dom对一个xml文件进行操作 高手请进,动态数组的生成? js如何禁止鼠标往文本框中拖入值 基于MVC的JavaScript+Web富应用开发
至于获取值 其实很简单 我说下我的方法 首先促发拖动的div的时候 把拖动div的id赋给一个变量;拖动不同的div 值也会跟着改变 然后根据上面的方法 当发生碰撞的时候获取变量的值 记得当拖动div停止拖动的 时候要清除变量的值!
如上方法 可以试试!
1:将以下css保存为css.css
body{
background-color:#777777;
color:#FFFFFF;
margin:0px;
padding:18px 0 0 18px;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}
.clear{clear:both;}
.ui-sortable{
background-color:#FFFFFF;
border:1px solid #555555;
color:#222222;
margin:0 15px 15px 0;
padding:0 10px 10px;
}
.ui-sortable h2{
background-color:#555555;
border-top:3px solid #666666;
color:#FFFFD0;
font-size:12px;
margin:0 -10px 10px;
line-height:2em;
padding:0 10px;
}dl.sort{
color:#222222;
margin:10px 0px;
}
.dl-sort-placeholder{height:50px;border: 1px dashed red;background: #fbf9ee;color: #363636;}
dl.sort dt{
background-color:#666666;
color:#FFFFFF;
cursor::default;
height:2em; line-height:2em;
padding:0px 6px;
position:relative;
}
dl.sort dd{
background-color:#FFFFD8;
margin:0px;
padding:3px 6px;
border-bottom:1px dotted #999999;
border-left:1px dotted #999999;
border-right:1px dotted #999999;
}span.options{cursor:pointer; position:absolute; }
.ui-sortable h2 span.options{right:8px; top:8px;position:relative;}
dl.sort dt span.options{right:6px; top:5px;}#container{float:left;}
#header{width:638px;}
#content{float:left; width:400px;}
#sidebar{float:left; width:200px;}
#footer{width:638px;}
#trashcan{
float:left;
width:150px; height:100px;
background-color:#CCCCCC;
}
#trashcan p{margin:0px;}2:将以下HTML保存为:drag.html[当然,别的也行]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>拖拽_demo</title>
<link href="css.css" type="text/css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>
<script language="javascript" src="drag.js"></script>
</head><body id="uidemo">
<button id="edit" onclick="pl.Start()">编辑</button>
<button id="Button1" onclick="pl.Destory()">停止</button>
<div id="container">
<div id="header" class="ui-sortable">
<h2>头版头条</h2>
<dl class="sort" id="a1">
<dt>我是 [dl:id=a1]</dt>
<dd>2222222222222</dd>
<dd>33333333333333</dd>
</dl>
</div>
<div id="content" class="ui-sortable">
<h2>详细内容</h2>
<dl class="sort" id="a2">
<dt>我是 [dl:id=a2]</dt>
<dd>555555555555555555555</dd>
<dd>6666666666666666666</dd>
</dl>
</div>
<div id="sidebar" class="ui-sortable">
<h2>滚动新闻</h2>
<dl class="sort" id="a3">
<dt>我是 [dl:id=a3]</dt>
<dd>7777777777777</dd>
<dd>8888888888888</dd>
<dd>7777777777777</dd>
<dd>8888888888888</dd> </dl>
<dl class="sort" id="a4">
<dt>我是 [dl:id=a4]</dt>
<dd>9999999999999</dd>
<dd>aaaaaaaaaaaaaaa</dd>
</dl>
<dl class="sort" id="a5">
<dt>我是 [dl:id=a5]</dt>
<dd>bbbbbbbb</dd>
<dd>cccccccccccc</dd>
</dl>
</div>
<div class="clear"></div>
<div id="footer" class="ui-sortable">
<h2>页脚项</h2>
<dl class="sort" id="a6">
<dt>我是 [dl:id=a6]</dt>
<dd>eeeeeeeeeeeee</dd>
</dl>
</div>
</div>
<div id="trashcan" class="ui-sortable">
<h2>回收站</h2>
</div>
</body>
</html>3:将以下js保存为:drag.jsvar PageLayout=function(){
this.moveUp = function(){
//向上移动子项目
var link = $(this),
dl = link.parents("dl"),
prev = dl.prev("dl");
if(link.is(".up") && prev.length > 0){dl.insertBefore(prev);}
}
this.addItem = function(){
//添加一个子项目
var sortable = $(this).parents(".ui-sortable");
var options = '<span class="options"><a class="up"><img src="up.gif" border="0"></a></span>';
var html = '<dl class="sort"><dt>Dynamic name'+options+'</dt><dd>Description</dd></dl>';
sortable.append(html).sortable("refresh").find("a.up").bind("click", this.moveUp);
}
this.emptyTrashCan = function(o){
//回收站
o.remove();
}
this.sortableChange = function(e, ui){
for(i in e)
{
//alert(i+":"+e[i])
}
if(ui.sender){
alert("警告!警告![dl:id="+ui.item.attr("id")+"] , 我是 [div:id="+$(this).attr("id")+"],你正在进入我的领空!\n\n你确定不怕我的炮火,要继续闯入吗?")
var w = $(this).width();
ui.placeholder.width(w); ui.helper.css("width",$(this).children().width());
}
}
this.sortableUpdate = function(e, ui){
//更新模块(用户回收站清空后)
if(this.id == "trashcan"){
ui.item.remove();
}
} this.Start=function(){
//引用主页面中的所有块
var els = ['#header', '#content', '#sidebar', '#footer', '#trashcan'];
var $els = $(els.toString());
//动态添加“增加子项目”、“向上移动”按钮
//$("h2", $els.slice(0,-1)).append('<span class="options"><a class="add"><img src="add.gif" border="0"></a></span>');//<span class="options"><a class="add"><img src="add.gif" border="0"></a></span>
$("dt", $els).append('<span class="options" style="padding-right:20px;"><a class="up">向上</a></span>');
//绑定相关事件
//$("a.add").bind("click", this.addItem);
$("a.up").bind("click", this.moveUp);
$("dt").css("cursor","move");
//使用jQuery插件
$els.sortable( 'enable' );
$els.sortable({
items: '> dl', //拖拽对象
handle: 'dt', //可触发该事件的对象
cursor: 'move', //鼠标样式
opacity: 0.8, //拖拽时透明
appendTo: 'body',
forcePlaceholderSize:false,
revert:true,
tolerance:'pointer',
placeholder: 'dl-sort-placeholder',
connectWith: els,
start: function(e,ui) {
//ui.helper.css("width","100");
//ui.helper.css("height","100");
},
change: this.sortableChange,
update: this.sortableUpdate //用于回收站
});
} this.Destory=function(){
//引用主页面中的所有块
var els = ['#header', '#content', '#sidebar', '#footer', '#trashcan'];
var $els = $(els.toString());
$els.sortable( 'refresh' );
$els.sortable( 'disable' );
}
}
pl=new PageLayout();
for(i in e)
{
//alert(i+":"+e[i])
}
上面的
for(i in e)
{
//alert(i+":"+e[i])
}
可以删除你按上面的步骤做好以后,直接访问drag.html。然后点击右上角的编辑按钮,即可开始拖拽,点击停止按钮,即可让拖拽失效
1:HTML中
在:
<div id="sidebar" class="ui-sortable">
<h2>滚动新闻</h2>下方添加:
<dl class="sort" id="a7">
<dt>我是 [dl:id=a7]拖拽记录</dt>
</dl>
2:drag.js中
将那条alert语句删除。修正sortableUpdate函数如下:
this.sortableUpdate = function(e, ui){
//更新模块(用户回收站清空后)
if(this.id == "trashcan"){ui.item.remove();}else{if(ui.sender){$("#a7").append("<dd>[dl:id="+ui.item.attr("id")+"] 被拖入 [div:id="+$(this).attr("id")+"] 容器中</dd>")}}
}修正目的:增加了一个容器去记录所有的有效拖拽操作,[注意:在当前容器中发生的排序操作将不被记录]