拖放

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

一、HTML5 新特性

在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

 

Event	On Event Handler	描述
		Fired when an element or text selection is being dragged.被拖动时触发一个元素或文本选择
		Fired when a drag operation is being ended (for example, by releasing a mouse button or hitting the escape key). (See .)
		Fired when a dragged element or text selection enters a valid drop target. (See .)
		Fired when an element is no longer the drag operation's immediate selection target.
		Fired when a dragged element or text selection leaves a valid drop target.
		Fired when an element or text selection is being dragged over a valid drop target (every few hundred milliseconds).
		Fired when the user starts dragging an element or text selection. (See .)
		Fired when an element or text selection is dropped on a valid drop target. (See .)

 

1  2  3  4 
      5  8 38 39 40 
     44 
     
45 
     49 50 51 52 

 

二、JQueryUI.sortable

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

 

1  2  3  4   
      5   
      6    7   
      8   
      9   27   28   29   42 43 44  45 
     
      46   
      
Item 1
47   
      
Item 2
48   
      
Item 3
49   
      
Item 4
50   
      
Item 5
51 
     
52  53 
     
      54   
      
Item 1
55   
      
Item 2
56   
      
Item 3
57   
      
Item 4
58   
      
Item 5
59 
     
60  61  62 63 

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                 },