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 相关文章推荐
经常用的图片在容器中的水平垂直居中实例
Jun 10 Javascript
慎用 somefunction.prototype 分析
Jun 02 Javascript
关于跨站脚本攻击问题
Dec 22 Javascript
JavaScript中的关键字&quot;VAR&quot;使用详解 分享
Jul 31 Javascript
JS实现多物体缓冲运动实例代码
Nov 29 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
Mar 12 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
Jan 21 Javascript
JQuery的Pager分页器实现代码
May 03 Javascript
Javascript使用function创建类的两种方法(推荐)
Nov 19 Javascript
javascript 中的继承实例详解
May 05 Javascript
vue实现模态框的通用写法推荐
Feb 26 Javascript
TypeScript开发Node.js程序的方法
Apr 30 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
做了CDN获取用户真实IP的函数代码(PHP与Asp设置方式)
2013/04/13 PHP
php使用ereg验证文件上传的方法
2014/12/16 PHP
54个提高PHP程序运行效率的方法
2015/07/19 PHP
CodeIgniter配置之database.php用法实例分析
2016/01/20 PHP
laravel执行php artisan migrate报错的解决方法
2019/10/09 PHP
JQuery 绑定事件时传递参数的实现方法
2009/10/13 Javascript
javascript回车完美实现tab切换功能
2014/03/13 Javascript
javascritp添加url参数将参数加入到url中
2014/09/25 Javascript
JavaScript设计模式之工厂模式和构造器模式
2015/02/11 Javascript
jquery 插件实现多行文本框[textarea]自动高度
2015/03/04 Javascript
jquery获取及设置outerhtml的方法
2015/03/09 Javascript
JS中的Replace方法使用经验分享
2015/05/20 Javascript
jQuery实现向下滑出的二级菜单效果实例
2015/08/22 Javascript
基于Require.js使用方法(总结)
2017/10/26 Javascript
react native 文字轮播的实现示例
2018/07/27 Javascript
JS实现页面数据懒加载
2020/02/13 Javascript
JS forEach跳出循环2种实现方法
2020/06/24 Javascript
[59:42]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python UnicodeEncodeError: 'gbk' codec can't encode character 解决方法
2015/04/24 Python
Django与遗留的数据库整合的方法指南
2015/07/24 Python
深入剖析Python的爬虫框架Scrapy的结构与运作流程
2016/01/20 Python
Python分析学校四六级过关情况
2017/11/22 Python
Jupyter安装nbextensions,启动提示没有nbextensions库
2020/04/23 Python
Python同步遍历多个列表的示例
2019/02/19 Python
python 对字典按照value进行排序的方法
2019/05/09 Python
python图像和办公文档处理总结
2019/05/28 Python
使用Python轻松完成垃圾分类(基于图像识别)
2019/07/09 Python
Python lxml模块的基本使用方法分析
2019/12/21 Python
Pycharm配置PyQt5环境的教程
2020/04/02 Python
应聘英语教师求职信
2014/04/24 职场文书
质量主管工作职责
2014/09/26 职场文书
期末考试复习计划
2015/01/19 职场文书
校运会宣传稿大全
2015/07/23 职场文书
MySQL 自定义变量的概念及特点
2021/05/13 MySQL
pytorch 如何把图像数据集进行划分成train,test和val
2021/05/31 Python
gateway网关接口请求的校验方式
2021/07/15 Java/Android