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. 一定 ...
随机推荐
- Svn Patch 中文乱码
关于Patch svn打patch的介绍:巧用svn create patch(打补丁)方案解决定制版需求 svn创建patch 1.在SVN的提交列表中,右键选择“创建补丁” 2.选择保存位置,保存 ...
- 转：GCC，LLVM，Clang编译器对比
GCC,LLVM,Clang编译器对比 转自: http://www.cnblogs.com/qoakzmxncb/archive/2013/04/18/3029105.html 在XCode中, ...
- PAT 1029. 旧键盘(20)
旧键盘上坏了几个键,于是在敲一段文字的时候,对应的字符就不会出现.现在给出应该输入的一段文字.以及实际被输入的文字,请你列出肯定坏掉的那些键. 输入格式: 输入在2行中分别给出应该输入的文字.以及实际 ...
- 正在编译转换: 未能找到元数据文件 EntityFramework.dll
错误 1 正在编译转换: 未能找到元数据文件“C:\Program Files (x86)\Microsoft Visual Studio 11.0\Common7\Tools\..\IDE\Enti ...
- ISAPI_Rewrite中文手册
参考:http://blog.csdn.net/fanxiaojie119/article/details/5353186 第一章:软件介绍ISAPI_Rewrite 是一款适用于IIS的功能强大的基 ...
- MVC3中常用的一些控件及方法
1.返回提示框 string script = String.Format("<script>alert('登录状态已失效! 请重新登录系统');location.href='{ ...
- JavaScript：立即执行的函数表达式
先要理解清楚几个概念: 以下转自:http://www.cnblogs.com/TomXu/archive/2011/12/31/2289423.html 问题的核心 当你声明类似functio ...
- LLC 逻辑链路控制
LLC 协 议 4.2.1 LLC帧格式 LLC协议定义了LLC层之间通信的帧格式,参见图4.3. 图4.3 LLC帧格式 LLC帧格式中各个字段的含义如下: ① 服务访问点(SAP)地址:SA ...
- matlab如何建立一个空矩阵，然后往里面赋值
x=:; y=[]; :length(x) % y=[y;x(i)];%把每一个x都放到Y里,成为一列 y=[y,x(i)];%把每一个x都放到Y里,成为一行 end
- C# 利用反射动态将字符串转换成属性对应的类型值
/// <summary> /// 为指定对象分配参数 /// </summary> /// <typeparam name="T">对象类型& ...