jQuery div拖拽用法实例
2016-01-14 00:00
671 查看
本文实例讲述了jQuery div拖拽用法。分享给大家供大家参考,具体如下:
这里需要引用好jquery 和 jqueryui两个包:
更多关于jQuery特效相关内容感兴趣的读者可查看本站专题:《jQuery常见经典特效汇总》
希望本文所述对大家jQuery程序设计有所帮助。
jQuery控制Div拖拽效果完整实例分析
jquery实现拖拽调整Div大小
jQuery拖拽div实现思路
jquery实现div拖拽宽度示例代码
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
这里需要引用好jquery 和 jqueryui两个包:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <script src="jquery1.8.3.js"></script> <script src="jquery-ui.js"></script> <style> .yuanjian{ float:left; width:180px; height:22px; padding-left:5px; margin-left:5px; margin-top:5px; cursor:pointer; border: 1px solid orange; } .fish{ float:left; width:180px; height:22px; padding-left:5px; margin-left:15px; margin-top:15px; cursor:pointer; border: 1px solid red; } </style> <script> $(function (){ $('#add_div').droppable({ accept:" .yuanjian ", hoverClass: "droppable-hover", drop: function(event, ui){ if(ele!=''){ if(ele.id.substr(0,13)=="div_yuanjian_"){ var tmpId = "fish_"+ele.id.substr(13,ele.id.length-13); var new_div = "<div class=\"fish\" id=\""+tmpId+"\">"+$('#'+ele.id).html() +" </div>"; $(this).before(new_div); //可以在这里绑定tmpId事件 } } } }); }); var ele = ''; var add_div_num = 0; function add_yuanjian(){ add_div_num++; var div_id = "div_yuanjian_"+add_div_num; var add_div = "<div class=\"yuanjian\" id=\""+div_id+"\">原件"+add_div_num+"</div>"; $('#add_yuanjian_div').before(add_div); $('#'+div_id).mouseover(function(){ $(this).css({background:"#E0E0E0"}); }).mouseout(function(){ $(this).css({background:"#FFFFFF"}); }).draggable({ helper:'clone', opacity:0.5, start:function(event,ui){ ele = event.srcElement || event.target; }}); } </script> </head> <body> <div style="height:400px;width:400px;border:1px solid gray;"> <div style="margin-left:10px;margin-top:10px;border:1px solid red;width:100px;height10px;">展示列表 </div> <div id="add_div" style="margin-left:10px;margin-top:10px;border:1px solid green;width:350px;height:320px;"> </div> </div> <div style="margin-top:10px;height:300px;width:400px; border: 1px solid gray;"> <div style="margin-left:10px;margin-top:10px;border:1px solid red;width:250px;height10px;">原件列表 <button onclick="add_yuanjian()">增加原件</button> </div> <div id="add_yuanjian_div"> </div> </div> </body> </html>
更多关于jQuery特效相关内容感兴趣的读者可查看本站专题:《jQuery常见经典特效汇总》
希望本文所述对大家jQuery程序设计有所帮助。
您可能感兴趣的文章:
jQuery使用drag效果实现自由拖拽divjQuery控制Div拖拽效果完整实例分析
jquery实现拖拽调整Div大小
jQuery拖拽div实现思路
jquery实现div拖拽宽度示例代码
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
相关文章推荐
- jQuery遮罩层效果实例分析
- jquery+json实现动态商品内容展示的方法
- jQuery实现的左右移动焦点图效果
- jquery淡入淡出效果简单实例
- jQuery取得iframe中元素的常用方法详解
- 轻松实现jquery手风琴效果
- 利用jquery监控滚动条动态加载数据
- jQuery旋转式动画导航特效
- jQuery延迟加载(懒加载)插件 – jquery.lazyload.js
- 代码:jquery小效果—— 吸顶
- jQuery ajax submit form 被拦截问题的解决
- JQuery选择器大全
- jquery页面滑到底部加载更多
- jquery判断节点是否存在
- JQuery与HTML元素的获取、设置、添加、删除
- jquery获取页面相关尺寸
- jquery easy ui ComboBox 内容过滤
- Jquery
- jquery——滚动条插件jscroll.js
- [jquery] 遮罩弹窗,点击遮罩弹窗自动隐藏