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 常用代码技巧大收集
Feb 25 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
Sep 20 Javascript
Jquery颜色选择器ColorPicker实现代码
Nov 14 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
Dec 27 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
Aug 07 Javascript
JavaScript截取、切割字符串的技巧
Jan 07 Javascript
JavaScript代码实现左右上下自动晃动自动移动
Apr 08 Javascript
jQuery基于排序功能实现上移、下移的方法
Nov 26 Javascript
JavaScript变速动画函数封装添加任意多个属性
Apr 03 Javascript
vue 实现特定条件下绑定事件
Nov 09 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
Mar 26 Javascript
微信小程序用户盒子、宫格列表的实现
Jul 01 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 jquery 实现新闻标签分类与无刷新分页
2009/12/18 PHP
php判断终端是手机还是电脑访问网站的思路及代码
2013/04/24 PHP
PHP实现根据密码长度显示安全条
2017/07/04 PHP
javascript弹出层输入框(示例代码)
2013/12/11 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2015/04/01 Javascript
js仿苹果iwatch外观的计时器代码分享
2015/08/26 Javascript
微信小程序 progress组件详解及实例代码
2016/10/25 Javascript
jQuery绑定事件的四种方式介绍
2016/10/31 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
2016/12/11 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
2017/02/08 Javascript
jQuery 防止相同的事件快速重复触发方法
2018/02/08 jQuery
微信小程序显示倒计时功能示例【测试可用】
2018/12/03 Javascript
基于JS实现web端录音与播放功能
2019/04/17 Javascript
vue-router跳转时打开新页面的两种方法
2019/07/29 Javascript
微信小程序 select 下拉框组件功能
2019/09/09 Javascript
jquery实现进度条状态展示
2020/03/26 jQuery
echarts浮动显示单位的实现方法示例
2020/12/04 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
2021/03/01 Vue.js
Python实现爬取百度贴吧帖子所有楼层图片的爬虫示例
2018/04/26 Python
对Python中list的倒序索引和切片实例讲解
2018/11/15 Python
pygame游戏之旅 添加游戏暂停功能
2018/11/21 Python
scrapy-redis的安装部署步骤讲解
2019/02/27 Python
Python3.5文件读与写操作经典实例详解
2019/05/01 Python
Python二元赋值实用技巧解析
2019/10/25 Python
Django自带的加密算法及加密模块详解
2019/12/03 Python
Pytorch 数据加载与数据预处理方式
2019/12/31 Python
将tensorflow.Variable中的某些元素取出组成一个新的矩阵示例
2020/01/04 Python
pytorch-RNN进行回归曲线预测方式
2020/01/14 Python
澳大利亚领先的在线美容商城:Adore Beauty
2017/04/14 全球购物
Meli Melo官网:名媛们钟爱的英国奢侈手包品牌
2017/04/17 全球购物
工程质量承诺书范文
2014/03/27 职场文书
美丽心灵观后感
2015/06/01 职场文书
对公司的意见和建议
2015/06/04 职场文书
2015年街道办事处团委工作总结
2015/10/14 职场文书
Python基础之进程详解
2021/05/21 Python
python小型的音频操作库mp3Play
2022/04/24 Python