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 相关文章推荐
HTML5附件拖拽上传drop &amp; google.gears实现代码
Apr 28 Javascript
利用毫秒减值计算时长的js代码
Sep 22 Javascript
js判断当前浏览器类型,判断IE浏览器方法
Jun 02 Javascript
关于JS数组追加数组采用push.apply的问题
Jun 09 Javascript
Jquery Post处理后不进入回调的原因及解决方法
Jul 15 Javascript
基于js实现的限制文本框只可以输入数字
Dec 05 Javascript
原生js轮播(仿慕课网)
Feb 15 Javascript
javascript代码优化的8点总结
Jan 29 Javascript
JS使用new操作符创建对象的方法分析
May 30 Javascript
layui表格数据重载
Jul 27 Javascript
在vue中axios设置timeout超时的操作
Sep 04 Javascript
JavaScript中Object、map、weakmap的区别分析
Dec 15 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调用MySQL存储过程的方法集合(推荐)
2013/07/03 PHP
PHP session_start()问题解疑(详细介绍)
2013/07/05 PHP
我整理的PHP 7.0主要新特性
2016/01/07 PHP
php实现的xml操作类
2016/01/15 PHP
PHP Header失效的原因分析及解决方法
2016/11/16 PHP
PHP自定义函数获取汉字首字母的方法
2016/12/01 PHP
ThinkPHP5 框架引入 Go AOP,PHP AOP编程项目详解
2020/05/12 PHP
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
2010/11/25 Javascript
javascript实现上传图片并预览的效果实现代码
2011/04/11 Javascript
javascript打印大全(打印页面设置/打印预览代码)
2013/03/29 Javascript
js获取某月的最后一天日期的简单实例
2013/06/22 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
2013/12/05 Javascript
JavaScript中document对象使用详解
2015/01/06 Javascript
javascript实现简单的鼠标拖动效果实例
2015/04/10 Javascript
js移动焦点到最后位置的简单方法
2016/11/25 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
2017/02/15 Javascript
jQuery niceScroll滚动条错位问题的解决方法
2018/02/03 jQuery
vue js秒转天数小时分钟秒的实例代码
2018/08/08 Javascript
angularjs请求数据的方法示例
2019/08/06 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
2019/11/13 Javascript
nodejs中的异步编程知识点详解
2021/01/17 NodeJs
Python工程师面试题 与Python Web相关
2016/01/14 Python
Python中使用多进程来实现并行处理的方法小结
2017/08/09 Python
python爬虫自动创建文件夹的功能
2018/08/01 Python
对Python中DataFrame选择某列值为XX的行实例详解
2019/01/29 Python
解决pycharm 远程调试 上传 helpers 卡住的问题
2019/06/27 Python
pycharm运行scrapy过程图解
2019/11/22 Python
英国DIY汽车维修配件网站:DIY Car Service Parts
2019/08/30 全球购物
客服主管岗位职责
2013/12/13 职场文书
幼儿园教师教学反思
2014/02/06 职场文书
教师爱岗敬业演讲稿
2014/05/05 职场文书
2014年庆祝国庆65周年演讲稿
2014/09/21 职场文书
幼儿园开学温馨提示
2015/07/15 职场文书
小学体育组工作总结
2015/08/13 职场文书
2015秋季田径运动会广播稿
2015/08/19 职场文书
Python 中random 库的详细使用
2021/06/03 Python