拖放

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

一、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 4651 (生成函数)

    HDU 4651 Partition Problem : n的整数划分方案数.(n <= 100008) Solution : 参考资料: 五角数 欧拉函数 五边形数定理 整数划分 一份详细的题 ...

  2. msp430入门编程27

    msp430中C语言开发工具调试程序 msp430入门学习 msp430入门编程

  3. AS3实现ToolTip效果

    AS3核心类中没有ToolTip类,Flex中的ToolTip类没法用在AS3工程中,Aswing的JToolTip不错,不过如果仅仅为了使用这一个类而导入Aswing就不太明智了.由于最近的项目需要 ...

  4. 【Nginx】如何建立新连接

    处理新连接事件的回调函数是ngx_event_accept,原型如下: void ngx_event_accept(ngx_event_t *ev) 具体流程如下: 1)首先调用accept方法试图建 ...

  5. 全文搜索引擎 Elasticsearch 安装

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

  6. Guava ---- Concurrent并发

    Guava在JDK1.5的基础上, 对并发包进行扩展. 有一些是易用性的扩展(如Monitor). 有一些是功能的完好(如ListenableFuture). 再加上一些函数式编程的特性, 使并发包的 ...

  7. hdu 3853（数学期望入门）

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=3853 LOOPS Time Limit: 15000/5000 MS (Java/Others)    ...

  8. SQL - 创建一个学生表，要求有主键约束和非空约束

    CREATE TABLE [dbo].[Student] ( [ID] [int] NOT NULL, [Name] [nchar](10) NOT NULL, [Age] [int] NOT NUL ...

  9. 聚合类新闻client产品功能点详情分析

    产品功能点 功能 今日头条 百度新闻 鲜果 ZAKER 媒体订阅 × √ ★ ★ 个性化内容推荐 ★ √ × × 个性化订阅(RSS) × × ★ × 视频新闻 × × × × 评论盖楼 √ √ √ ...

  10. Java使用三种不同循环结构对1+2+3+...+100 求和

    ▷//第一种求法,使用while结构 /** * @author 9527 * @since 19/6/20 */ public class Gaosi { public static void ma ...