您的位置:首页 > Web前端 > JQuery

jquery 拖拽介绍

2015-06-03 16:24 651 查看
需要拖动的一个配置,可以放入的一个配置。。就实现了
window.onload=function(){
var dragOption={
appendTo : "body",
cursor : 'pointer',
zIndex : 9999,
cursorAt : { bottom : 5, right:5},
distance : 10,
helper : function(evt){
var target=evt.target;
var span=document.createElement("span");
span.id="aaa";
span.innerText=target.innerText;
span.style.cursor="pointer";
return span;
},
start : function (evt,ui){
start方法是拖动的时候触发的,可以返回false就不会拖动
},
drag : function(evt,ui){
var helper = ui.helper[0];
}
};
$("li").draggable(dragOption);//配置了才能拖动
var dropconfig = {
cursor:"wait",
greedy: true,
activeClass: "activeCls",
hoverClass: "hoverCls",
tolerance: 'pointer',
accept : function(obj){//获取的是拖动的源目标
obj=obj[0];
if(obj.tagName=="LI"){
return true;
}
},
drop : function(evt,ui){
var helper = ui.helper[0];
console.log(helper);
}
};

$("#top").droppable(dropconfig);
var dropconfig = {
greedy: true,
activeClass: "activeCls",
hoverClass: "hoverCls",
tolerance: 'pointer',
accept : function(obj){
obj=obj[0];
if(obj.tagName=="aa"){
return true;
}
},
drop : function(evt,ui){
var helper = ui.helper[0];
console.log(helper);//这里获取了里面那个span
}
};
$("#bottom").droppable(dropconfig);//可放入的东西

};
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: