拖放

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

一、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. Linux虚拟机fdisk分区

    以下操作全部基于win7 64位系统上的Linux虚拟机(CentOS6.6). 当Linux虚拟机的硬盘空间不够用时,可以手动添加硬盘块,流程如下: 右键虚拟机,点击“Add”按钮: 选择“Hard ...

  2. iOS 调用系统相册 相机 时，显示中文标题

    解决手机语言已经设置显示中文 在调用系统相册.相机界面 时显示英文问题, 在 info.plist里面添加Localized resources can be mixed YES 表示是否允许应用程序 ...

  3. Educational Codeforces Round 37 (Rated for Div. 2) G

    G. List Of Integers time limit per test 5 seconds memory limit per test 256 megabytes input standard ...

  4. java基础 4 继承（3）this 与 super关键字

    this用来指向当前实例对象,用来区别成员变量与方法的形参 super可以用来访问父类的方法或成员变量,当子类构造函数需要显示的调用父类的构造函数时,super()必须为构造函数中的第一条语句.

  5. eclipse菜单字体乱码的解决

    方法一: 这个跟活动控制台代码页有关. 如果要更改为 UTF-8,则需要运行 chcp 命令: chcp 65001 有时新安装的系统可能在运行一些中文软件时显示错乱,可通过控制面板修改系统区域来管理 ...

  6. 佳能 imageclass mf40120

    加粉2612A 加粉方式: 完全拆解安装:在技术部 自已研究 简单拆开,一分为二,倒粉,然后,加分:一些其他单位 外部加粉,拆粉口外盖:一些其他单位

  7. 关于oracle存储过程的若干问题备忘

    1.在oracle中,数据表别名不能加as,如: select a.appname from appinfo a;-- 正确select a.appname from appinfo as a;-- ...

  8. ios开发 MPMoviePlayerController 视频播放器

    项目中用到视频播放功能, 写点视频基础部分 MPMoviePlayerController是通过MediaPlayer.frame引入的,可用于播放在iOS支持的所有格式的视频,用起来很简单!!! M ...

  9. 聚类算法K-Means, K-Medoids, GMM, Spectral clustering，Ncut

    聚类算法是ML中一个重要分支,一般采用unsupervised learning进行学习,本文根据常见聚类算法分类讲解K-Means, K-Medoids, GMM, Spectral cluster ...

  10. 限制input的输入类型

    1.只能输入和粘贴汉字 <input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepaste= ...