jQuery div拖拽用法实例
更新时间：2016年01月14日 11:11:57 作者：乘着风在飞
这篇文章主要介绍了jQuery div拖拽用法,以完整实例形式分析了jQuery结合UI插件实现拖拽功能的相关技巧,需要的朋友可以参考下
本文实例讲述了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特效相关内容感兴趣的读者可查看本站专题：《jQuery常见经典特效汇总》
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
图片滚动效果想必大家都已司空见惯了吧，接下来本文介绍下jQuery+CSS实现图片滚动，感兴趣的你可不要错过了哈，希望可以帮助到你2013-03-03
悬停效果、延迟加载想必大家都有见到过吧，在本文将为大家介绍下是如何实现的，感兴趣的朋友不要错过2013-11-11
不过最近安装了FF3.5正式版，发现这种方法在它下面得不到值，就去看jquery的帮助文档，在文档中对select选中的引用是用如下方法2009-07-07
JQuery 抓取博客园首页RSS直接将代码保存到文本文档，更改后缀名为html浏览 即可查看效果2011-12-12
jquery学习笔记二 实现可编辑的表格，让表格可以自由的编辑。2010-04-04
这篇文章主要介绍了jQuery制作可自定义大小的拼图游戏的代码，非常的简单实用，虽然还只是局限于数字顺序的拼图，后续慢慢完善上图片，但还是分享给大家，有需要的小伙伴可以参考下。2015-03-03
jquery 可以用text()方法来取得字符串，再用length 判断长度，然后用substring()方法格式化截断2011-09-09
jQuery EasyUI结合zTree树形结构制作web页面
这篇文章主要为大家详细介绍了JQuery EasyUI 结合ztrIee的后台页面开发，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-09-09
下面小编就为大家带来一篇Jquery鼠标放上去显示全名的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
jquery ajax加载数据前台渲染方式 不用for遍历的方法
今天小编就为大家分享一篇jquery ajax加载数据前台渲染方式 不用for遍历的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
最新评论