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. 一定 ...
随机推荐
- MysqlHelper 需要重写
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Text;u ...
- java.sql.preparedstatement和java.sql.statement的区别
本文转自CSDN,然后整理了一遍.原文出处:CSDN JDBC(java database connectivity,java数据库连接)的api中的主要的四个类之一的java.sql.stateme ...
- 假设检验：p-value，FDR，q-value
来源:http://blog.sina.com.cn/s/blog_6b1c9ed50101l02a.html,http://wenku.baidu.com/link?url=3mRTbARl0uPH ...
- ASP.NET点击按钮弹出确认对话框方法
开发asp.net网页应用程序的时候,有些页面的按钮需要增加一个确认对话框,比如: 实现这个功能比较简单,代码这样写: Button.Attributes["onclick"] = ...
- java多线程系类：基础篇：06线程让步
本系类的知识点全部来源于http://www.cnblogs.com/skywang12345/p/3479243.html,我只是复制粘贴一下,特在此说明. 概要 本章,会对Thread中的线程让步 ...
- LeetCode 01 Two Sum swift
class TwoSum { func sumTow(nums: [Int], target: Int)->[Int]{ ,]; ;x<nums.count;x++){ ;y<num ...
- [py]shell着色
print "\033[32;1myou are 30 older and little than 40\033[0m"
- QT 记事本小程序
//mainwindow.h #ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> #include <Q ...
- NOI2018准备Day3
noip2016成绩出来了,199,268名 noip2017需要考过6个女生才能进省队,不包括明年会突然跳出来的大神...... 今天晚上玩了一晚上,做了2道题. 这事儿只干今晚一次
- rpc框架: thrift/avro/protobuf 之maven插件生成java类
thrift.avro.probobuf 这几个rpc框架的基本思想都差不多,先定义IDL文件,然后由各自的编译器(或maven插件)生成目标语言的源代码,但是,根据idl生成源代码这件事,如果每次都 ...