jQuery UI Draggable + Sortable 结合使用
工作中需要将一个左边的设计好的控件,拖拽到右边的面板中,同时保持右边面板中的控件自由排序,这时候就需要及支持拖拽又支持排序的操作了,
Demo截图:从左边控件拖到右边区域
代码段:
<script type="text/javascript">
$(function () {
$("#box_wrap1,#box_wrap2").sortable({
connectWith: ".box_wrap",
helper: "clone",
cursor: "move",//移动时候鼠标样式
opacity: 0.5, //拖拽过程中透明度
placeholder: "box-holdplace",//占位符className,设置一个样式
}).disableSelection(); $(".dragable").draggable({
connectToSortable: ".sortable",
helper: "clone",
// revert: "invalid",
// handle: ".handle"
});
});
</script>
Html 代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="js/bootstrap/css/bootstrap.css" rel="stylesheet" />
<link href="js/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="css/index.css" rel="stylesheet" /> <script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap/js/bootstrap.min.js"></script> <!--Sortable -->
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> </head>
<body>
<div class="container">
<div class="row">
<div class="column col-md-6">
<div class="box_wrap " id="box_wrap1" >
<div class="box dragable">
left-test1
</div>
<div class="box dragable">
left-test2
</div>
<div class="box dragable">
left-test3
</div>
</div>
</div>
<div class="column col-md-6">
<div class="box_wrap sortable" id="box_wrap2">
<div class="box">
test1
</div>
<div class="box">
test2
</div>
<div class="box">
test3
</div>
</div>
</div>
</div>
</div>
</body>
</html>
jQuery UI Draggable + Sortable 结合使用的更多相关文章
- JQuery UI Draggable插件使用说明文档
JQuery UI Draggable插件用来使选中的元素可以通过鼠标拖动.Draggable的元素受css: ui-draggable影响, 拖动过程中的css: ui-draggable-drag ...
- 让 jQuery UI draggable 适配移动端
背景: 在移动端,本人要实现对某个元素的拖动,想到使用 jQuery UI 的 draggable 功能.但是发现此插件的拖动只支持PC端,不支持移动端. 原因: 原始的 jQuery UI 里,都是 ...
- jquery ui draggable,droppable 学习总结
刚接触的时候,分不清draggable和droppable的区别,瞎弄了一会,其实很简单,draggable就是“拖”的功能,droppable就是“放”的功能. draggable()是被拖动的元素 ...
- jquery ui 插件------------------------->sortable
<!doctype html><html lang="en"><head> <meta charset="utf-8" ...
- jQuery UI - draggable 中文API
·概述 在任何DOM元素启用拖动功能.通过单击鼠标并拖动对象在窗口内的任何地方移动. 官方示例地址:http://jqueryui.com/demos/draggable/ 所有的事件回调函数都有两个 ...
- JQuery UI - draggable(转)
·概述 在任何DOM元素启用拖动功能.通过单击鼠标并拖动对象在窗口内的任何地方移动. 官方示例地址:http://jqueryui.com/demos/draggable/ 所有的事件回调函数都有两个 ...
- JQuery UI - draggable参数中文详细说明
概述 在任何DOM元素启用拖动功能.通过单击鼠标并拖动对象在窗口内的任何地方移动. 官方示例地址:http://jqueryui.com/demos/draggable/ 所有的事件回调函数都有两个参 ...
- jquery UI Draggable和Droppable 案例
<html> <head><title>draggable</title> <script type="text/javascript& ...
- Jquery ui draggable在chrome和ie7下的bug
当页面足够长,向下滚动一些之后, 在拖动时,被拖动的div会向下产生滚动距离那么高(scrolltop)的差距 鼠标位置距div顶部差距了正好页面scroll的距离,页面scoll越多差的越多. 解决 ...
随机推荐
- 云服务器用ssh登录
本地生成密钥 这里选择在购买前先在本地生成密钥key(分为private key和public key),所以先生成密钥再进行购买,购买完以后直接ssh登录,不需要输入密码(安全性考虑) 其中,pub ...
- Linux grep 命令大全
grep: 用于模糊查找,在标准输入或者文件中 格式: grep [选项参数]... PATTERN |FILE ... 选项参数说明: -E, --extended-regexp PATTERN ...
- 禁用Browser Link
Browser Link是VS 2013开始引入的一个强大功能,让前端代码(比如AngularJS的代码)在VS中的修改更加轻而易举. 前端代码是运行在浏览器中,而Visual Studio通常只会和 ...
- SSL HTTPS 生成证书
SSL HTTPS 一.生成服务器私钥.公钥 $ openssl genrsa -out server.key 2048 $ openssl rsa -in server.key -pubout -o ...
- 十 web爬虫讲解2—Scrapy框架爬虫—Scrapy安装—Scrapy指令
Scrapy框架安装 1.首先,终端执行命令升级pip: python -m pip install --upgrade pip2.安装,wheel(建议网络安装) pip install wheel ...
- mongodb之一些简单的增删改查语句
数据库操作:show dbs;#查看数据库use test;#如果没有就创建一个db;#查看当前数据库db.dropDatabase();#删除数据库 数据操作:show collections:#查 ...
- ubuntu 安装python3.7 以及安装pip3 出现Command '('lsb_release', '-a')' returned non-zero exit status 1问题解决
最近因为电脑重装,东西全没了,总计一下最近重装环境的过程. 如果没有安装包,请下载: wget http://www.python.org/ftp/python/3.7.0/Python-3.7.0. ...
- [转载]java操作word生成水印
应用场景 为了保护版权或辨别文件的真伪,有时需要在生成的Word文件中动态添加水印,PageOffice组件的WaterMark类就封装了给在线编辑的Word文件添加水印这一功能,调用接口非常简单. ...
- Sturts2 三种开发模式 (转)
1.实现与 Servlet API的交互struts2中提供了Map类型的request.session与application,可以从ActionContext对象中获得.ActionContext ...
- LeetCode OJ:Valid Anagram(有效字谜问题)
Given two strings s and t, write a function to determine if t is an anagram of s. For example,s = &q ...