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 相关文章推荐
jQuery实现表头固定效果的实例代码
May 24 Javascript
jQuery中replaceWith()方法用法实例
Dec 25 Javascript
JavaScript中Cookie操作实例
Jan 09 Javascript
js控制网页前进和后退的方法
Jun 08 Javascript
jquery带翻页动画的电子杂志代码分享
Aug 21 Javascript
一个极为简单的requirejs实现方法
Oct 20 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
Dec 18 Javascript
JS实现页面打印功能
Mar 16 Javascript
大白话讲解JavaScript的Promise
Apr 06 Javascript
利用canvas实现的加载动画效果实例代码
Jul 05 Javascript
IScroll那些事_当内容不足时下拉刷新的解决方法
Jul 18 Javascript
关于redux-saga中take使用方法详解
Feb 27 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
Json_encode防止汉字转义成unicode的方法
2016/02/25 PHP
php+mysql+ajax实现单表多字段多关键词查询的方法
2017/04/15 PHP
PHP实现对xml的增删改查操作案例分析
2017/05/19 PHP
PHP并发场景的三种解决方案代码实例
2021/02/27 PHP
用js查找法实现当前栏目的高亮显示的代码
2007/11/24 Javascript
7个Javascript地图脚本整理
2009/10/20 Javascript
分享20多个很棒的jQuery 文件上传插件或教程
2011/09/04 Javascript
JavaScript栏目列表隐藏/显示简单实现
2013/04/03 Javascript
javascript得到当前页的来路即前一页地址的方法
2014/02/18 Javascript
如何将php数组或者对象传递给javascript
2014/03/20 Javascript
jQuery实现滚动切换的tab选项卡效果代码
2015/08/26 Javascript
Nodejs express框架一个工程中同时使用ejs模版和jade模版
2015/12/28 NodeJs
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
2016/04/29 Javascript
JavaScript必知必会(五) eval 的使用
2016/06/08 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
2016/09/06 Javascript
Vue.js双向绑定实现原理详解
2016/12/22 Javascript
原生js实现下拉框功能(支持键盘事件)
2017/01/13 Javascript
vue component组件使用方法详解
2017/07/14 Javascript
js模块加载方式浅析
2017/08/12 Javascript
js实现上传图片并显示图片名称
2019/12/18 Javascript
js实现简易计算器小功能
2020/11/18 Javascript
vue动态合并单元格并添加小计合计功能示例
2020/11/26 Vue.js
Python 时间处理datetime实例
2008/09/06 Python
在Python的列表中利用remove()方法删除元素的教程
2015/05/21 Python
Python切片操作深入详解
2018/07/27 Python
Django filter动态过滤与排序实现过程解析
2020/11/26 Python
python音频处理的示例详解
2020/12/23 Python
西班牙Polo衫品牌:Polo Club
2020/08/09 全球购物
创业计划书中要认真思考的问题
2013/12/28 职场文书
期终自我鉴定
2014/02/17 职场文书
学校党员干部承诺书
2015/05/04 职场文书
2015年宣传部个人工作总结
2015/05/14 职场文书
指导老师鉴定意见
2015/06/05 职场文书
心理学培训心得体会
2016/01/22 职场文书
golang日志包logger的用法详解
2021/05/05 Golang
vue 把二维或多维数组转一维数组
2022/04/24 Vue.js