拖放

拖放是一种常见的特性,即抓取对象以后拖到另一个位置。

一、HTML5 新特性

在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。

Event On Event Handler 描述
drag ondrag Fired when an element or text selection is being dragged.被拖动时触发一个元素或文本选择
dragend ondragend Fired when a drag operation is being ended (for example, by releasing a mouse button or hitting the escape key). (See Finishing a Drag.)
dragenter ondragenter Fired when a dragged element or text selection enters a valid drop target. (See Specifying Drop Targets.)
dragexit ondragexit Fired when an element is no longer the drag operation's immediate selection target.
dragleave ondragleave Fired when a dragged element or text selection leaves a valid drop target.
dragover ondragover Fired when an element or text selection is being dragged over a valid drop target (every few hundred milliseconds).
dragstart ondragstart Fired when the user starts dragging an element or text selection. (See Starting a Drag Operation.)
drop ondrop Fired when an element or text selection is dropped on a valid drop target. (See Performing a Drop.)
 <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
#div1{height: 150px;border: 1px solid #000;}
</style>
<script type="text/javascript">
/*
1、dataTransfer对象是用于保存数据的 和 取出数据
2、preventDefault() 来避免浏览器对数据的默认处理
3、appendChild 方法 追加到元素内
*/
function allowDrop(ev)
{
console.log('over')
// preventDefault() 来避免浏览器对数据的默认处理
ev.preventDefault();
} function dragstart(ev)
{
console.log('dragstart')
// The DataTransfer object is used to hold the data that is being dragged during a drag and drop operation. dataTransfer对象是用于保存数据的
ev.dataTransfer.setData("Text",ev.target.id);
} function drop(ev)
{
console.log('into')
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
// appendChild 方法 追加到元素内
ev.target.appendChild(document.getElementById(data));
} </script>
</head>
<body>
<!--
ondrop: 被拖动时触发一个元素或文本选择,元素释放时执行
ondragover: 被拖动时覆盖在元素上时 执行
-->
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<!--
draggable="true" 开启拖拽属性
ondragstart 开始拖拽的元素时执行
-->
<img id="drag1" src="./css/a.png" draggable="true" ondragstart="dragstart(event)" width="336" height="69" /> </body>
</html>

二、JQueryUI.sortable

通过监控鼠标移动,修改position样式

 <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Sortable - Connect lists</title>
<link rel="stylesheet" href="css/jquery-ui.css">
<link rel="stylesheet" href="css/style.css">
<style>
#sortable1, #sortable2 {
border: 1px solid #eee;
width: 142px;
min-height: 20px;
list-style-type: none;
margin: 0;
padding: 5px 0 0 0;
float: left;
margin-right: 10px;
}
#sortable1 li, #sortable2 li {
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
width: 120px;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#sortable1" ).sortable({
connectWith: ".connectedSortable"
})
$( "#sortable2" ).sortable({
connectWith: ".connectedSortable"
}) } );
</script>
</head>
<body> <ul id="sortable1" class="connectedSortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul> <ul id="sortable2" class="connectedSortable">
<li class="ui-state-highlight">Item 1</li>
<li class="ui-state-highlight">Item 2</li>
<li class="ui-state-highlight">Item 3</li>
<li class="ui-state-highlight">Item 4</li>
<li class="ui-state-highlight">Item 5</li>
</ul> </body>
</html>
    $(".choose_chart").sortable({         //sortable化 dom
axis:'x',
cursor: "move",
items :"li", //只是li可以拖动
opacity: 0.6, //拖动时,透明度为0.6
revert: false, //释放时,增加动画
over : function(event, ui){ //点击
console.log(0)
Field.chooseID=event.toElement.id;
if($(".borderBlue").length>0){
// if($("#report_type").val()==0){
gs.getItemDataToChart()
// }
}
isOff = true;
},
out:function(event,ui){console.log(1)},//移动
beforeStop:function(event,ui){console.log(2)},//停止
update:function(event,ui){console.log(3)},//更换
stop:function(event,ui){ //结束
console.log(4)
// gs.chartIsEmpty();
if(Field.isAll){
$(".add_chart").append(addChartFunc[Field.chooseID]);
}else{
$("#alert2").dialog("open");
$("#alert2").html("曲线基本信息必须填写");
}
$(".choose_item").html(chooseChartStr)
},

http://www.w3school.com.cn/html5/html_5_draganddrop.asp

http://api.jqueryui.com/sortable/

H5的draggable属性和jqueryUI.sortable的更多相关文章

  1. jquery-ui sortable 使用实例

    jquery-ui sortable 使用实例 最近公司需要做任务看板,需要拖拽效果.点击查看效果.由于网站是基于vue的技术栈,最开始找了一个现成的vue封装的拖拽组件:Vue.Draggable, ...

  2. JQUERY 拖拽 draggable droppable resizable selectable sortable

    今天用了jq ui的拖动碰撞功能,好不容易看到有详细的API解说,记录如下:   <script language="JavaScript" type="text/ ...

  3. jqueryui sortable拖拽后保存位置

    jqueryUI sortable 可以用来进行页面拖拽布局,然而有一个小问题就是拖拽后如何保存状态. 工作中遇到了这个情况,遍把这个问题记了下来,具体思路是: 利用拖拽stop后利用   var a ...

  4. html5 的draggable属性使用<转载收藏>

    在HTML5中,已经支持在浏览器与其他应用程序之间的数据互相拖动,同时也大大简化了有关于拖放方面的代码. 实现拖放的步骤 在HTML5中要想实现拖放操作,至少要经过两个步骤: 将想要拖放的对象元素的d ...

  5. jquery-ui sortable 排序

      https://blog.csdn.net/u013066244/article/details/51954198 <link ref="stylesheet" href ...

  6. draggable属性设置元素是否可拖动。

    设置标签属性draggable="true"将一个标签内的元素拖动到另外一个标签进行显示: <!DOCTYPE HTML> <html> <head& ...

  7. jquery-ui sortable 在拖动换位置时改变元素的大小导致占位与实际不一致

    使用jquery ui sortable时 需求是在拖动的时候要隐藏一部分元素,然后按照隐藏后的元素高度换位, 解决方案是修改源码jquery-ui.js, _mouseStart方法中开头增加 if ...

  8. H5利用pattern属性和oninvalid属性验证表单

    HTML代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...

  9. 什么是CSS盒模型及利用CSS对HTML元素进行定位的实现(含h5/css3新增属性)

    大家好,很高兴又跟大家见面了!本周更新博主将给大家带来更精彩的HTML5技术分享,通过本周的学习,可实现大部分的网页制作.以下为本次更新内容. 第四章 css盒模型 <!DOCTYPE html ...

随机推荐

  1. C. Nearest vectors--cf598C(极角排序)

    http://codeforces.com/problemset/problem/598/C 题目大意: 给你你个向量  向量的起点都是从(0,0)开始的   求哪个角最小  输出这两个向量 这是第一 ...

  2. MongoDB学习day09--Mongoose数据校验

    一.Mongoose检验参数 required : 表示这个数据必须传入max: 用于 Number 类型数据, 最大值 min: 用于 Number 类型数据, 最小值 enum:枚举类型, 要求数 ...

  3. vmware下centos6.7网络配置

    使用NAT方式: 查看/etc/sysconfig/network-script/ 下面没有ifcfg-eth0 新建ifcfg-eth0,内容如下 DEVICE=eth0 BOOTPROTO=dhc ...

  4. [转] Oracle数据库维护常用SQL语句集合

           原文地址 进程相关: 1. 求当前会话的SID,SERIAL# SELECT Sid, Serial# FROM V$session WHERE Audsid = Sys_Context ...

  5. [转]三层架构与MVC之间的区别

    我们平时总是将三层架构与MVC混为一谈,殊不知它俩并不是一个概念.下面我来为大家揭晓我所知道的一些真相. 首先,它俩根本不是一个概念. 三层架构是一个分层式的软件体系架构设计,它可适用于任何一个项目. ...

  6. hdu1181 dfs搜索之变形课

    原题地址 这道题数据据说比較水,除了第一组数据是Yes以外.其余都是No.非常多人抓住这点就水过了.当然了,我认为那样过了也没什么意思.刷oj刷的是质量不是数量. 这道题从题目上来看是个不错的 搜索题 ...

  7. CV_HAAR_FEATURE_DESC_MAX和CV_HAAR_FEATURE_MAX

    #define CV_HAAR_FEATURE_MAX 3 //提前定义的一个宏,在程序中表示一个haar特征由至多三个矩形组成 #define CV_HAAR_FEATURE_DESC_MAX 20 ...

  8. iOS中3种正则表达式的使用

    1.利用NSPredicate(谓词)匹配 例如匹配有效邮箱: ? 1 2 3 4 NSString *email = @“nijino_saki@163.com”:  NSString *regex ...

  9. web 开发之js---ajax 中的两种提交方式ajax post 和 ajax get 实例

    ()post http://04101334.iteye.com/blog/637695/ ()get function serializeElement(element) { var method ...

  10. AngularJS 基础入门(指令篇)

    一.介绍 AngularJS 是google 开发人员设计的一个前端开发框架,它是由是由javascript 编写的一个JS框架.通常它是用来在静态网页构建动态应用不足而设计的. AngularJS特 ...