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. 一定 ...
随机推荐
- REST架构
网络上的所有事物都被抽象为资源(resource): 每个资源对应一个唯一的资源标识符(resource identifier): 通过通用的连接器接口(generic connector inter ...
- 一类有依赖的树形背包dp方法
失踪人口回归系列 这个标题是不是看起来很厉害呢233 给一道例题:有一个树,每一个节点代表一个物品,每个物品有重量和价值,每个物品必须先选父亲才能选自己.求给定重量内最大价值. 这题的思路十分的厉害. ...
- SPM12manual，统计部分（8-10）笔记
fMRI model specifictaion GLM based 包括以下步骤:①明确GLM设计矩阵:②用经典或贝叶斯方法估计GLM参数:③利用对比向量检查结果,生成统计参数图(SPMs)以及后验 ...
- sql 2012 提示列名无效 但可以执行问题
笔者目前使用Ctrl+Shift+R可以解决这个问题,因为智能感知的问题,需要重新整理一下intellisense.有其他方法,请园友共享一下,谢谢. VS2012及13都有用到智能感知,而在sql里 ...
- HTML5+JS 《五子飞》游戏实现（八）人机对战
要想实现人机对战,就必须让电脑自动下棋,而且要知道自动去查找对方的棋子,看看有没有可以挑一对的,有没有可以夹一个的,这样下起来才有意思. 当电脑用户下完棋后,电脑应立即搜索用户的棋子,然后如果没有被吃 ...
- [CF#250 Div.2 D]The Child and Zoo(并查集）
题目:http://codeforces.com/problemset/problem/437/D 题意:有n个点,m条边的无向图,保证所有点都能互通,n,m<=10^5 每个点都有权值,每条边 ...
- scrollTop和offsetTop的区别，scrollTopLeft和offsetLeft的区别
scrollTop和offsetTop的区别:scrollTop是指某个可滚动区块向下滚动的距离,比如向下滚动了10个像素,那么这个元素的scrollTop属性值就是10,这个属性的值是可读写的,且不 ...
- poj 1698 Alice‘s Chance
poj 1698 Alice's Chance 题目地址: http://poj.org/problem?id=1698 题意: 演员Alice ,面对n场电影,每场电影拍摄持续w周,每周特定几天拍 ...
- 3n+1b 备忘录方法
题目详情 对任何一个自然数n,如果它是偶数,那么把它砍掉一半:如果它是奇数,那么把(3n+1)砍掉一半.这样一直反复砍下去,最后一定在某一步得到n=1.卡拉兹在1950年的世界数学家大会上公布了这个猜 ...
- python学习笔记整理——集合 set
python学习整理笔记--集合 set 集合的用途:成员测试和消除重复的条目,进行集合运算 注意:花括号或set()函数可以用于创建集合. 注意:若要创建一个空的集合你必须使用set(),不能用{} ...