H5的draggable属性和jqueryUI.sortable

拖放

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

一、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的更多相关文章

jquery-ui sortable 使用实例
jquery-ui sortable 使用实例最近公司需要做任务看板,需要拖拽效果.点击查看效果.由于网站是基于vue的技术栈,最开始找了一个现成的vue封装的拖拽组件:Vue.Draggable, ...
JQUERY 拖拽 draggable droppable resizable selectable sortable
今天用了jq ui的拖动碰撞功能,好不容易看到有详细的API解说,记录如下: <script language="JavaScript" type="text/ ...
jqueryui sortable拖拽后保存位置
jqueryUI sortable 可以用来进行页面拖拽布局,然而有一个小问题就是拖拽后如何保存状态. 工作中遇到了这个情况,遍把这个问题记了下来,具体思路是: 利用拖拽stop后利用 var a ...
html5 的draggable属性使用<转载收藏>
在HTML5中,已经支持在浏览器与其他应用程序之间的数据互相拖动,同时也大大简化了有关于拖放方面的代码. 实现拖放的步骤在HTML5中要想实现拖放操作,至少要经过两个步骤: 将想要拖放的对象元素的d ...
jquery-ui sortable 排序
https://blog.csdn.net/u013066244/article/details/51954198 <link ref="stylesheet" href ...
draggable属性设置元素是否可拖动。
设置标签属性draggable="true"将一个标签内的元素拖动到另外一个标签进行显示: <!DOCTYPE HTML> <html> <head& ...
jquery-ui sortable 在拖动换位置时改变元素的大小导致占位与实际不一致
使用jquery ui sortable时需求是在拖动的时候要隐藏一部分元素,然后按照隐藏后的元素高度换位, 解决方案是修改源码jquery-ui.js, _mouseStart方法中开头增加 if ...
H5利用pattern属性和oninvalid属性验证表单
HTML代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...
什么是CSS盒模型及利用CSS对HTML元素进行定位的实现（含h5/css3新增属性）
大家好,很高兴又跟大家见面了!本周更新博主将给大家带来更精彩的HTML5技术分享,通过本周的学习,可实现大部分的网页制作.以下为本次更新内容. 第四章 css盒模型 <!DOCTYPE html ...

随机推荐

Google SPDY
SPDY(读作“SPeeDY”)是Google开发的基于TCP的应用层协议,用以最小化网络延迟,提升网络速度,优化用户的网络使用体验.SPDY并不是一种用于替代HTTP的协议,而是对HTTP协议的增强 ...
oc温习六：预处理指令
预处理:分析程序前先处理的语句,它可以识别散布在程序中的特定语句.所有的预处理语句都适用“#”开头,这个符号必须是一行中的第一个非空字符. 预处理可以大概分为三类:文件包含.宏定义和条件编译. 1.文 ...
三、fs文件操作模块
fs模块用于文件的读写等操作. 该模块有如下这些方法: 1.fs.stat() : 检测是文件还是目录 const fs = require('fs'); fs.stat('test.html',fu ...
洛谷——P1347 排序
洛谷—— P1347 排序题目描述一个不同的值的升序排序数列指的是一个从左到右元素依次增大的序列,例如,一个有序的数列A,B,C,D 表示A<B,B<C,C<D.在这道题中,我们 ...
寒武纪camp Day2
补题进度:8/10 A(计数+BIT) 题意: 给一个长度为n的数组a[],任意选0<=i<=j<n,将a[i]~a[j]从小到大排序,形成新的数组.问有多少个不同的新数组. N,a ...
Unity从实践中学习(1)
首先在实际中unity的开发之中快捷键应该是相当重要的一个部分,这里先引用csdn的一个博客,https://blog.csdn.net/qq_34552886/article/details/697 ...
java比较两个日期大小
方法一 /** * 比较两个日期之间的大小 * * @param d1 * @param d2 * @return 前者大于后者返回true 反之false */ public boolean com ...
Web容器自己主动对HTTP请求中參数进行URLDecode处理
这篇文章转载自 : Web容器自己主动对HTTP请求中參数进行URLDecode处理如题.在Java中或许非常多人都没有注意到当我们发送一个http请求时,假设附带的參数被URLEncode之后,到 ...
【Nginx】http模块的数据结构
定义fttp模块方式很简单,比如:ngx_module_t ngx_http_mytest_module; 其中,ngx_module_t是一个Nginx模块的数据结构. typedef struct ...
Java编程50题
[程序1] 题目:古典问题:有一对兔子.从出生后第3个月起每一个月都生一对兔子,小兔子长到第三个月后每一个月又生一对兔子,假如兔子都不死.问每一个月的兔子总数为多少? //这是一个菲波拉契 ...

H5的draggable属性和jqueryUI.sortable

拖放

一、HTML5 新特性

二、JQueryUI.sortable

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

随机推荐

热门专题