拖放

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

一、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. HDU 1074 Doing Homework【状态压缩DP】

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1074 题意: 给定作业截止时间和完成作业所需时间,比截止时间晚一天扣一分,问如何安排作业的顺序使得最 ...

  2. java基础语法4--封装，继承，多态

    学习路线: 未封装==>封装==>继承==>多态==>抽象类 首先还是那句话,万物皆对象,对象有行为和属性. 一:封装 1.封装的概念: 信息隐蔽和对象的属性及操作结合成一个独 ...

  3. Myeclipse配置jad

    下载地址:http://pan.baidu.com/s/1bnpMEuF 1.下载jad158g.win.zip 下载后解压.解压缩后将jad.exe拷贝到自定义的文件夹内:我这里用的是D:/jad/ ...

  4. Java编程50题

    [程序1]    题目:古典问题:有一对兔子.从出生后第3个月起每一个月都生一对兔子,小兔子长到第三个月后每一个月又生一对兔子,假如兔子都不死.问每一个月的兔子总数为多少?    //这是一个菲波拉契 ...

  5. activiti自己定义流程之自己定义表单（一）：环境配置

    先补充说一下自己定义流程整个的思路,自己定义流程的目的就是为了让一套代码解决多种业务流程.比方请假单.报销单.採购单.协作单等等.用户自己来设计流程图. 这里要涉及到这样几个基本问题,一是不同的业务需 ...

  6. C#趣味程序---百鸡百钱

    问题:公鸡一仅仅5元,母鸡一仅仅3元,小鸡三仅仅1元.问100元能够买多少仅仅鸡? using System; namespace ConsoleApplication1 { class Progra ...

  7. Android自己定义之TextView跑马灯的监听

    TextView都有跑马灯的效果,假设说让你去监听跑马灯效果的运行.我认为这个需求有点二了.可是也要实现. 思路: 1.自己定义View  继承TextView   这样的方法过于麻烦,仅仅是监听一个 ...

  8. linux之rsync远程数据同步备份

    rsync服务是一种高效的远程数据备份的工具,该服务的port号为873, 是Liunx下的一种非独立服务.由xinetd超级服务管理,取代监听873port. 长处: 1.rsync能够利用ssh和 ...

  9. 使用正則表達式的格式化与高亮显示json字符串

    使用正則表達式的格式化与高亮显示json字符串 json字符串非常实用,有时候一些后台接口返回的信息是字符串格式的,可读性非常差,这个时候要是有个能够格式化并高亮显示json串的方法那就好多了,以下看 ...

  10. 《coredump问题原理探究》Linux x86版7.9节list相关的iterator对象

    这一节.看一下list的iterator对象在内存的布局 1 #include <list> 2 3 void init( std::list<int>& lst ) ...