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