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.)

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <style>
 6     #div1{height: 150px;border: 1px solid #000;}
 7 </style>
 8 <script type="text/javascript">
 9 /*
10 1、dataTransfer对象是用于保存数据的 和 取出数据
11 2、preventDefault() 来避免浏览器对数据的默认处理
12 3、appendChild 方法 追加到元素内
13 */
14 function allowDrop(ev)
15 {
16      console.log('over')
17      // preventDefault() 来避免浏览器对数据的默认处理
18     ev.preventDefault();
19 }
20 
21 function dragstart(ev)
22 {
23     console.log('dragstart')
24     // The DataTransfer object is used to hold the data that is being dragged during a drag and drop operation.  dataTransfer对象是用于保存数据的
25     ev.dataTransfer.setData("Text",ev.target.id);
26 }
27 
28 function drop(ev)
29 {
30         console.log('into')
31     ev.preventDefault();
32     var data=ev.dataTransfer.getData("Text");
33     // appendChild 方法 追加到元素内
34     ev.target.appendChild(document.getElementById(data));
35 }
36 
37 </script>
38 </head>
39 <body>
40 <!-- 
41 ondrop：            被拖动时触发一个元素或文本选择，元素释放时执行
42 ondragover：        被拖动时覆盖在元素上时 执行
43  -->
44 <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
45 <!-- 
46 draggable="true"    开启拖拽属性
47 ondragstart            开始拖拽的元素时执行
48  -->
49 <img id="drag1" src="./css/a.png" draggable="true" ondragstart="dragstart(event)" width="336" height="69" />
50 
51 </body>
52 </html>

二、JQueryUI.sortable

通过监控鼠标移动，修改position样式

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="utf-8">
 5   <meta name="viewport" content="width=device-width, initial-scale=1">
 6   <title>jQuery UI Sortable - Connect lists</title>
 7   <link rel="stylesheet" href="css/jquery-ui.css">
 8   <link rel="stylesheet" href="css/style.css">
 9   <style>
10   #sortable1, #sortable2 {
11     border: 1px solid #eee;
12     width: 142px;
13     min-height: 20px;
14     list-style-type: none;
15     margin: 0;
16     padding: 5px 0 0 0;
17     float: left;
18     margin-right: 10px;
19   }
20   #sortable1 li, #sortable2 li {
21     margin: 0 5px 5px 5px;
22     padding: 5px;
23     font-size: 1.2em;
24     width: 120px;
25   }
26   </style>
27   <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
28   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
29   <script>
30   $( function() {
31     $( "#sortable1" ).sortable({
32       connectWith: ".connectedSortable"
33     })
34     $( "#sortable2" ).sortable({
35       connectWith: ".connectedSortable"
36     })
37 
38 
39 
40   } );
41   </script>
42 </head>
43 <body>
44  
45 <ul id="sortable1" class="connectedSortable">
46   <li class="ui-state-default">Item 1</li>
47   <li class="ui-state-default">Item 2</li>
48   <li class="ui-state-default">Item 3</li>
49   <li class="ui-state-default">Item 4</li>
50   <li class="ui-state-default">Item 5</li>
51 </ul>
52  
53 <ul id="sortable2" class="connectedSortable">
54   <li class="ui-state-highlight">Item 1</li>
55   <li class="ui-state-highlight">Item 2</li>
56   <li class="ui-state-highlight">Item 3</li>
57   <li class="ui-state-highlight">Item 4</li>
58   <li class="ui-state-highlight">Item 5</li>
59 </ul>
60  
61  
62 </body>
63 </html>

 1    $(".choose_chart").sortable({         //sortable化 dom
 2                 axis:'x',
 3                 cursor: "move",
 4                 items :"li",                        //只是li可以拖动
 5                 opacity: 0.6,                       //拖动时，透明度为0.6
 6                 revert: false,                       //释放时，增加动画
 7                 over    : function(event, ui){       //点击
 8                     console.log(0)
 9                     Field.chooseID=event.toElement.id;
10                     if($(".borderBlue").length>0){
11 //                     if($("#report_type").val()==0){
12                             gs.getItemDataToChart()
13 //                     }
14                     }
15                     isOff = true;
16                 },
17                 out:function(event,ui){console.log(1)},//移动
18                 beforeStop:function(event,ui){console.log(2)},//停止
19                 update:function(event,ui){console.log(3)},//更换
20                 stop:function(event,ui){ //结束
21                     console.log(4)
22 //                    gs.chartIsEmpty();
23                     if(Field.isAll){
24                         $(".add_chart").append(addChartFunc[Field.chooseID]);
25                     }else{
26                         $("#alert2").dialog("open");
27                         $("#alert2").html("曲线基本信息必须填写");
28                     }
29                     $(".choose_item").html(chooseChartStr)
30                 },

http://www.w3school.com.cn/html5/html_5_draganddrop.asp

http://api.jqueryui.com/sortable/