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在iframe中无法弹出对话框的解决方法
Jan 12 Javascript
js判断滚动条是否已到页面最底部或顶部实例
Nov 20 Javascript
javascript判断变量是否有值的方法
Apr 20 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
Apr 27 Javascript
js跨域请求数据的3种常用的方法
Dec 01 Javascript
使用 Node.js 对文本内容分词和关键词抽取
May 27 Javascript
浅谈Vue路由快照实现思路及其问题
Jun 07 Javascript
详解操作虚拟dom模拟react视图渲染
Jul 25 Javascript
JavaScript中var的重要性实例分析
Jul 09 Javascript
Vue3 源码导读(推荐)
Oct 14 Javascript
vue学习笔记之作用域插槽实例分析
Feb 01 Javascript
Vue中keep-alive组件的深入理解
Aug 23 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 操作符与控制结构
2012/03/07 PHP
简单的php缓存类分享     php缓存机制
2014/01/22 PHP
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
2007/02/22 Javascript
通过Javascript创建一个选择文件的对话框代码
2012/06/16 Javascript
JS实现仿新浪黄色经典滑动门效果代码
2015/09/27 Javascript
jQuery实用技巧必备(中)
2015/11/03 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
2016/02/02 Javascript
BootStrap的Datepicker控件使用心得分享
2016/05/25 Javascript
跨域请求的完美解决方法(JSONP, CORS)
2016/06/12 Javascript
javascript实现右下角广告框效果
2017/02/01 Javascript
用jquery的attr方法实现图片切换效果
2017/02/05 Javascript
WebSocket实现简单客服聊天系统
2017/05/12 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
2017/08/03 Javascript
vue实现全选和反选功能
2017/08/31 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
2017/09/20 jQuery
浅谈webpack下的AOP式无侵入注入
2017/11/12 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
2018/01/21 Javascript
浅析java线程中断的办法
2018/07/29 Javascript
vue自定义指令之面板拖拽的实现
2019/04/14 Javascript
使用Python制作自动推送微信消息提醒的备忘录功能
2018/09/06 Python
Linux系统(CentOS)下python2.7.10安装
2018/09/26 Python
python 异或加密字符串的实例
2018/10/14 Python
Python闭包思想与用法浅析
2018/12/27 Python
python远程连接MySQL数据库
2019/04/19 Python
使用Python-OpenCV向图片添加噪声的实现(高斯噪声、椒盐噪声)
2019/05/28 Python
讲解Python3中NumPy数组寻找特定元素下标的两种方法
2019/08/04 Python
python用pip install时安装失败的一系列问题及解决方法
2020/02/24 Python
CSS3弹性盒模型开发笔记(三)
2016/04/26 HTML / CSS
HTML5-WebSocket实现聊天室示例
2016/12/15 HTML / CSS
Sofmap官网:日本著名的数码电器专卖店
2017/05/19 全球购物
AJAX应用和传统Web应用有什么不同
2013/08/24 面试题
团员学习总结的自我评价范文
2013/10/14 职场文书
商铺门面租房协议书
2014/10/21 职场文书
解析CSS 提取图片主题色功能(小技巧)
2021/05/12 HTML / CSS
数据设计之权限的实现
2022/08/05 MySQL
React如何使用axios请求数据并把数据渲染到组件
2022/08/05 Javascript