拖放
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
一、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/