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);//可放入的东西 };
相关文章推荐
- Jquery判断是不是移动设备浏览
- jquery iframe自适应高度
- jquery的checked
- jquery html5 上传图片并且 图片回显
- jquery实现checkbox复选框的全选反选
- jQuery学习笔记3--网页字体变大变小
- 用户注册验证_基于jquery validate
- $.grep ,$.map,jquery筛选数组之grep、each、inArray、map的用法及遍历json对象
- jquery页面刷新
- jquery qrcode二维码生成插件
- jQuery中extend()和fn.extend()方法详解
- jquery中添加属性和删除属性
- jQuery事件绑定on()、bind()与delegate() 方法详解
- jquery 防止按钮二次点击
- jQuery插件jqplot的详细配置说明和渲染器
- jquery选择器,逗号
- Jquery 获取CheckBoxList 中选择的值和获取RadioButton 选中的状态
- jquery抖动的按钮
- CSS选择器与jQuery选择器的异同:一些特殊的选择器
- jquery delegate