需要拖动的一个配置,可以放入的一个配置。。就实现了
window.οnlοad=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);//可放入的东西
};
jquery 拖拽介绍
最新推荐文章于 2023-05-16 17:31:57 发布