jquery-ui-处理拖动位置Droppable，Draggable
一.效果。如下图中，各途中可相互拖拉，右下角可删除。注意图1和图2对比区别
图1
图2
二.源码详解
html源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>公告页面管理</title>
<script src="jquery-1.11.1.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="report_page.js"></script>
<style type="text/css">
.page_title{
width:90%; }
header{
height: 60px;
border-bottom: 1px solid #f0f0f0;
line-height: 60px;
margin-bottom: 30px;
background-color:#243141;
}
.navigation {
height: 40px;
line-height:40px;
width: 100%;
background-color: #2175bc;
}
a {
text-decoration: none;
}
a:hover {text-decoration: none;}
.navigator_zy {
float: left;
font-size: 15px;
text-decoration: none;
color: #FFF;
padding-left: 30px;
padding-left: 30px;
} .navigator_zy>a>span {
color: #fff;
}
#dropzone {
padding: 20px;
background: #eaeaea;
min-height: 100px;
overflow: hidden;
} .item {
float:left;
width:145px;
height:220px;
cursor: pointer;
margin: 5px;
padding: 5px 10px;
border-radius: 3px;
position: relative;
} .item .remove {
position: absolute;
bottom: 0px;
right: 0px;
}
ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
.fanhuiimg {
float: right;
margin-right: -26px;
margin-top: 60px;
width: 26px;
height: 87px;
cursor: pointer;
}
</style>
</head>
<body> <div class="container">
<div id="dropzone">
<div class="item drop-item" idStr="1" style="background:url(image/1.jpg);background-size:100% 100%;">
<button type="button" class="btn btn-default btn-xs remove">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
<div class="item drop-item" idStr="2" style="background:url(image/2.jpg);background-size:100% 100%;">
<button type="button" class="btn btn-default btn-xs remove">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
<div class="item drop-item" idStr="3" style="background:url(image/3.jpg);background-size:100% 100%;">
<button type="button" class="btn btn-default btn-xs remove">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
<div class="item drop-item" idStr="4" style="background:url(image/4.jpg);background-size:100% 100%;">
<button type="button" class="btn btn-default btn-xs remove">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
<div class="item drop-item" idStr="5" style="background:url(image/5.jpg);background-size:100% 100%;">
<button type="button" class="btn btn-default btn-xs remove">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
<div class="item drop-item" idStr="6" style="background:url(image/6.jpg);background-size:100% 100%;">
<button type="button" class="btn btn-default btn-xs remove">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
<div class="item drop-item" idStr="7" style="background:url(image/7.jpg);background-size:100% 100%;">
<button type="button" class="btn btn-default btn-xs remove">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</div>
</div>
</body>
</html>
js源码
$(function(){
$('.btn.remove').click(function(){
if(confirm("确定要删除页面吗？")) {
$(this).parent().detach();
}
});
var dropable = $('#dropzone').droppable({
activeClass : 'active',
hoverClass : 'hover',
accept : ":not(.ui-sortable-helper)"
});
dropable.sortable({
items : '.drop-item',
sort : function() {
$(this).removeClass("active");
}
});
$('#report_page_save_btn').click(function(){
save();
});
$('#report_page_def_btn').click(function(){
if(confirm("确定要恢复页面数据吗？")) {
set_def();
}
});
});
使用其他第三方js结构如下。其实就只有使用了jquery-ui
另一个简单案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>公告页面管理</title>
<script src="jquery-1.11.1.min.js"></script>
<script src="jquery-ui.min.js"></script>
<style>
#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});
</script>
</head>
<body> <div id="draggable" class="ui-widget-content">
<p>请把我拖拽到目标处！</p>
</div> <div id="droppable" class="ui-widget-header">
<p>请放置在这里！</p>
</div> </body>
</html>
jquery-ui-处理拖动位置Droppable，Draggable的更多相关文章
- jQuery UI API - 可拖拽小部件（Draggable Widget）(转)
所属类别 交互(Interactions) 用法 描述:允许使用鼠标移动元素. 版本新增:1.0 依赖: UI 核心(UI Core) 部件库(Widget Factory) 鼠标交互(Mouse I ...
- JQuery UI的拖拽功能
JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互.动画.特效等API,并且封装了一些Web小部件(Widget).同时,JQuery UI继承了jquery的插件支持,有大量 ...
- jQuery基础（常用插件 表单验证，图片放大镜，自定义对象级，jQuery UI，面板折叠）
1.表单验证插件——validate 该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下: $(form).validate({o ...
- jquery ui draggable,droppable 学习总结
刚接触的时候,分不清draggable和droppable的区别,瞎弄了一会,其实很简单,draggable就是“拖”的功能,droppable就是“放”的功能. draggable()是被拖动的元素 ...
- JQuery UI Draggable插件使用说明文档
JQuery UI Draggable插件用来使选中的元素可以通过鼠标拖动.Draggable的元素受css: ui-draggable影响, 拖动过程中的css: ui-draggable-drag ...
- jQuery UI resizble、draggable的div包含iframe导致缩放和拖拽的不平滑解决方法
前言 不仅仅是jQuery UI resizble的div包含iframe会导致缩放的不平滑,draggable也会出现包含iframe会导致拖放的不平滑,但是因为jQuery UI有为draggab ...
- jquery UI 跟随学习笔记——拖拽（Draggable）
引言 这周暂时没有任务下达,所以老大给我的任务就是熟悉jquery相关插件,我就先选择了jquery UI插件,以及jquery库学习. 我用了两天的时候熟悉Interactions模块中的Dragg ...
- 让 jQuery UI draggable 适配移动端
背景: 在移动端,本人要实现对某个元素的拖动,想到使用 jQuery UI 的 draggable 功能.但是发现此插件的拖动只支持PC端,不支持移动端. 原因: 原始的 jQuery UI 里,都是 ...
- 如何使用jquery - ui 的图标icons 及图标的相对位置 +jquerui是如何来显示图标的?
1. 只需要引入 jquery-ui 的主css文件: jquery-ui.css 文件?? 不需要 引入 jquery-ui-structure/theme.css文件??? ,,,,, 2. 一定 ...
随机推荐
- No2. S2错题本
---恢复内容开始--- 正确答案:D,因为isFormField()是FileItem类的方法 正确答案:C,因为当//1处代码执行后,第0项就删除了,那么list.Add(1)内的对象就会自动补位 ...
- $(window).load(function() {})和$(document).ready(function(){})的区别
JavaScript 中的以下代码 : Window.onload = function (){// 代码 } 等价于 Jquery 代码如下: $(window).load(function ( ...
- Makefile总述②文件命名、包含其他文件makefile、变量、重建重载、解析
Makefile的内容 在一个完整的 Makefile 中,包含了 5 个东西:显式规则.隐含规则.变量定义.指示符和注释. 显式规则:它描述了在何种情况下如何更新一个或者多个被称为目标的文件( Ma ...
- Nginx负载均衡配置
1.yum安装nginx yum install nginx 2.启动nginx chkconfig nginx on service nginx start向web服务器中放入测试文件: < ...
- [No00004A]为什么你看了很多书，却依然没有洞见
摘要: 前几天有人在知乎上问:今天就回答下很多人问了很久的这个问题,并且解释一下如何构建系统化的知识体系.我想很多人看到这个问题,期待的答案是一个书单,可是我要告诉你这并没有什么卵用.我想大部分人都经 ...
- 5.Transact-SQL编程
转载于:http://www.cnblogs.com/hoojo/archive/2011/07/19/2110862.html Transact-SQL中的存储过程,非常类似于Java语言中的方法, ...
- Mysql备份系列（2）--mysqldump备份（全量+增量）方案操作记录
在日常运维工作中,对mysql数据库的备份是万分重要的,以防在数据库表丢失或损坏情况出现,可以及时恢复数据. 线上数据库备份场景:每周日执行一次全量备份,然后每天下午1点执行MySQLdump增量备份 ...
- tween.js
简要教程 tween.js是一款可生成平滑动画效果的js动画库.相关的动画库插件还有:snabbt.js 强大的jQuery动画库插件和Tweene-超级强大的jQuery动画代理插件. tween ...
- SQL 2014新特性- Delayed durability
ACID 是数据库的基本属性.其中的D是指"持久性":只要事务已经提交,对应的数据修改就会被保存下来,即使出现断电等情况,当系统重启后之前已经提交的数据依然能够反映到数据库中. 那 ...
- 【转】Sql Server参数化查询之where in和like实现之xml和DataTable传参
转载至: http://www.cnblogs.com/lzrabbit/archive/2012/04/29/2475427.html 在上一篇Sql Server参数化查询之where in和li ...