$(element).myDrag({ parent:'parent', //定义拖动不能超出的外框,拖动范围 randomPosition:true, //初始化随机位置 direction:'all', //方向 handler:false, //把手 dragStart:function(x,y){}, //拖动开始 x,y为当前坐标 dragEnd:function(x,y){}, //拖动停止 x,y为当前坐标 dragMove:function(x,y){} //拖动进行中 x,y为当前坐标 }); /* ***说明 ***1.代码34行,阻止除img元素外所有子元素冒泡事件,如有需要请自行修改 ***2.一些浏览器无法阻止img默认浏览器事件(其实就是拖动img会新窗口打开),so,最好是把img做成背景,或者在img上再覆盖一个div层,再使用下面的handler拖动 ***3.本插件有添加addClass功能,在拖动的时候,会给拖动元素添加'on'的样式,如有需要,可自行修改'on'的样式表,本例'on'的样式为z-index:9;为了保持拖动的时候,当前元素为最高层 */
$('.drag-box-1 .drag').each(function(index){ $(this).myDrag({ direction:'x' }); });
此用来添加元素内部 handler
$('.drag-box-1 .drag').each(function(index){ $(this).myDrag({ handler:'.handler' }); });
定义拖动范围
$('.drag-box-1 .drag').each(function(index){ $(this).myDrag({ parent'.test' }); });
定义函数
$('.drag-box-6 .drag').each(function(index){ $(this).myDrag({ dragStart:function(){ $('.lg span').html('').eq(0).html('开始拖动!'); }, dragEnd:function(){ $('.lg span').html('').eq(1).html('停止拖动!'); }, dragMove:function(){ $('.lg span').html('').eq(2).html('拖动中!'); } }); });