拖放

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

一、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. 前端的指导方针---css篇

    英语是渣渣,想学英语,又不想花钱报培训班.看不懂的文章,还是翻译一下留着自己看吧. 引自   :  https://github.com/bendc/frontend-guidelines HTML ...

  2. POJ 1724 【存在附加约束的最短路问题】【优先队列】

    题意:给K个权值.给含有N个点,R条单向边的图. 每条边都有两个权值,其中一个路长,另外一个是附加权值. 要求路的附加权值之和不超过K的情况下求最短路. 思路: 自己的思路太狭隘,这题还是看了大牛的思 ...

  3. Unity从实践中学习(1)

    首先在实际中unity的开发之中快捷键应该是相当重要的一个部分,这里先引用csdn的一个博客,https://blog.csdn.net/qq_34552886/article/details/697 ...

  4. 微服务 Framework

    Dubbo :https://github.com/dubbo Spring Cloud :https://github.com/spring-cloud

  5. 有多个git项目要用多个秘钥

    在~/.ssh文件夹下新建文件config,格式例如以下 Host "authmanage" HostName "code.csdn.net" User &qu ...

  6. 全文搜索引擎 Elasticsearch 安装

    全文搜索引擎 Elasticsearch 安装 学习了:http://www.ruanyifeng.com/blog/2017/08/elasticsearch.html 拼音:https://www ...

  7. 【java项目实战】一步步教你使用MyEclipse搭建java Web项目开发环境（一）

    首先.在開始搭建MyEclipse的开发环境之前.还有三步工具的安装须要完毕,仅仅要在安装配置成功之后才干够进入以下的java Web项目开发环境的搭建. 1.安装工具 第一步,下载并安装JDK,到官 ...

  8. 【Mongodb教程 第八课 】MongoDB 更新文档

    MongoDB的 update() 和 save() 方法用于更新文档的集合. update()方法更新现有的文档值,而替换现有的文档通过的文件中 save() 方法. MongoDB Update( ...

  9. 优化 html 标签 为何能用HTML/CSS解决的问题就不要使用JS？

    优化 html 标签 2018年05月11日 08:56:24 阅读数:19 有些人写页面会走向一个极端,几乎页面所有的标签都用div,究其原因,用div有很多好处,一个是div没有默认样式,不会有m ...

  10. [LeetCode][Java] Remove Duplicates from Sorted List II

    题意: Given a sorted linked list, delete all nodes that have duplicate numbers, leaving only distinct  ...