jQuery div拖拽用法实例


Posted in Javascript onJanuary 14, 2016

本文实例讲述了jQuery 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程序设计有所帮助。

Javascript 相关文章推荐
关于JavaScript的gzip静态压缩方法
Jan 05 Javascript
数组方法解决JS字符串连接性能问题有争议
Jan 12 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
Mar 18 Javascript
如何消除inline-block属性带来的标签间间隙
Mar 31 Javascript
温习Javascript基础语法之词法结构
May 31 Javascript
关于Javascript中defer和async的区别总结
Sep 20 Javascript
微信小程序实现表单校验功能
Mar 30 Javascript
使用JS和canvas实现gif动图的停止和播放代码
Sep 01 Javascript
Cordova(ionic)项目实现双击返回键退出应用
Sep 17 Javascript
vue控制多行文字展开收起的实现示例
Oct 11 Javascript
2020京东618叠蛋糕js脚本(亲测好用)
Jun 02 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
Aug 07 Javascript
javascript检测flash插件是否被禁用的方法
Jan 14 #Javascript
分享jQuery插件的学习笔记
Jan 14 #Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
Jan 14 #Javascript
Jquery easyui开启行编辑模式增删改操作
Jan 14 #Javascript
JavaScript基本语法学习教程
Jan 14 #Javascript
JavaScript对象参数的引用传递
Jan 14 #Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
Jan 14 #Javascript
You might like
php mb_substr()函数截取中文字符串应用示例
2014/07/29 PHP
Smarty模板变量与调节器实例详解
2019/07/20 PHP
对YUI扩展的Gird组件 Part-1
2007/03/10 Javascript
解决jquery1.9不支持browser对象的问题
2013/11/13 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
2014/02/12 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
2014/12/10 Javascript
jQuery可见性过滤器:hidden和:visibility用法实例
2015/06/24 Javascript
JS更改select内option属性的方法
2015/10/14 Javascript
URL中“#” “?” &amp;“”号的作用浅析
2017/02/04 Javascript
addeventlistener监听scroll跟touch(实例讲解)
2017/08/04 Javascript
利用nodeJs anywhere搭建本地服务器环境的方法
2018/05/12 NodeJs
js定义类的方法示例【ES5与ES6】
2019/07/30 Javascript
vue实现动态表格提交参数动态生成控件的操作
2020/11/09 Javascript
[01:55]2014DOTA2国际邀请赛 BBC正赛第一天总结
2014/07/10 DOTA
[40:04]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
Python中设置变量作为默认值时容易遇到的错误
2015/04/03 Python
python交互式图形编程实例(二)
2017/11/17 Python
wx.CheckBox创建复选框控件并响应鼠标点击事件
2018/04/25 Python
selenium+python实现自动化登录的方法
2018/09/04 Python
python中退出多层循环的方法
2018/11/27 Python
在Python中将函数作为另一个函数的参数传入并调用的方法
2019/01/22 Python
基于PyQt4和PySide实现输入对话框效果
2019/02/27 Python
英国Zoro工具:手动工具,电动工具和个人防护用品
2016/11/02 全球购物
Veronica Beard官网:在酷、经典和别致之间找到了平衡
2018/01/11 全球购物
法国女性内衣购物网站:Glamuse
2019/05/13 全球购物
Johnson Fitness澳大利亚:高级健身器材
2021/03/16 全球购物
EJB的基本架构
2016/09/22 面试题
护理实习自我鉴定
2013/12/14 职场文书
群众路线对照检查材料
2014/09/22 职场文书
临时租车协议范本
2014/09/23 职场文书
优秀班组事迹材料
2014/12/24 职场文书
2015年公务员转正工作总结
2015/04/24 职场文书
公务员岗前培训心得体会
2016/01/08 职场文书
一篇文章带你学习Mybatis-Plus(新手入门)
2021/08/02 Java/Android
详解JavaScript的计时器和按钮效果设置
2022/02/18 Javascript
详解Mysql数据库平滑扩容解决高并发和大数据量问题
2022/05/25 MySQL