draggable,droppable

1，简单拖拽

1）html

<div id="container">
                                    <div id="dragsource"> 
                                        <h3 id="targetMsg">拽我!</h3> 
                                    </div>
                                </div>


<div id="droppable" style="background-color:gray;height:300px;"> 
                                <p>Can drop! </p> 
                                </div>

开始，height:300没有写px，droppable好像不可以

2）JQuery

<script type="text/javascript"> 
$(function() { 
    $( "#dragsource" ).draggable({ 
        create: function(event,ui) { 
        $(this).find("h3").html("drag create"); //第一次拖动时出现，以后拖动不出现
        }, 
        start: function(event,ui) { 
        $(this).find("h3").html("drag start"); 
        }, 
        drag: function(event,ui) { 
        $(this).find("h3").html("drag drag"); 
        }, 
        stop:function(event,ui){ 
        $(this).find("h3").html("drag stop"); 
        } 
        }); 

        $( "#droppable" ).droppable({ 
            create: function(event,ui) { 
                $(this).find("p").html( "Drop create" ); 
            }, 
            activate: function(event,ui) { 
                $(this).find("p").html( "Drop here ! activate" ); 
            }, 
            deactivate: function(event,ui) { 
                $(this).find("p").html( "Drop ! deactivate" ); //与上面的stop共进退好像
            }, 
            over: function(event,ui) { 
                $( this ).find( "p" ).html( "Oh, Yeah! over" ); 
    
                }, 
                out: function(event,ui) { 
                $( this ).find( "p" ).html( "Don't leave me! out" ); 
    
                }, 
            drop: function( event, ui ) { 
            $( this ).find( "p" ).html( "I've got it! drop" ); 
            } 
        }); 
}); 
</script>

其中，droppable的activate方法，是按下鼠标拖动就会激活，（无论是不是在droppable区域）

实际验证表明：

对于draggable的对象，

create只触发一次，以后就是start，stop，如果有drag函数，则几乎看不到start的出现；

对于droppable的对象，

deactivate好像和对象的stop差不多

参考网址：http://www.jb51.net/article/29890.htm

对于源（source)，可以监听的事件包括：

　　create: 在source上应用draggable函数时触发
　　start：开始拖动时触发
　　drag：拖动过程中触发
　　stop：释放时触发
对于目标（target）,可以监听的事件包括：
　　create: 在target上应用droppable函数时触发
　　activate：如果当前拖动的source可以drop到本target，则触发
　　deactivate：如果可以drop到本target的拖拽停止，则触发
　　over：source被拖动到target上面
　　out：source被拖动离开target
　　drop：source被释放到target

2，helper：original，clone

<script> 
$(function() { 
$( "#dragsource" ).draggable({ 
helper:"clone" 
}); 

$("#container").droppable({ 
drop:function(event,ui){ 
$(this).append($("<p style='position:absolute;left:"+ 
ui.offset.left+";top:"+ui.offset.top+"'>clone</p>")); 
//注意，append里面也是$()，这是一个dom元素
} 
}); 
}) 
</script>

<div id="dragsource"> 
                                        <h3 id="targetMsg">拽我!</h3> 
                                    </div>

<div id="container" style="background-color:gray;height:300px;"> 
                                
                                </div>

3，显示拖动的方向

$( "#dragX" ).draggable({
axis:"x"
});
$( "#dragY" ).draggable({
axis:"y"
});

4，拖动的范围

//范围是parent，说明只能在div id=draggable1的父元素范围内活动

$( "#draggable1" ).draggable({
containment:"parent" ///其中String可以为parent,document,window
});
$( "#draggable2" ).draggable({
containment:[20,20,300,200]
});

5，拖动的手柄

<div id="draggable">
<p>handle</p>
</div>
……
<script>
$("#draggable").draggable({handle:"p"});
</script>

6，droppable指定可以接收哪些元素drop

$(".selector").droppable({ accept: '.special' })

7，增强用户体验

$(function() { 
    $( "#draggable2" ).draggable({ revert: "invalid",cursor: "move", cursorAt: { top: 56, left: 56 } }); 
    $( "#droppable" ).droppable({ 
    activeClass: "ui-state-hover", 
    hoverClass: "ui-state-active", 
    drop: function( event, ui ) { 
        $( this ) 
        .addClass( "ui-state-highlight" ) 
        .find( "p" ) 
        .html( "Dropped!" ); 
        } 
    });
});

<div id="draggable2" class="draggable"> 
                                    <p>I revert when I'm not dropped</p> 
                                    </div> 
                                    <br/>
                                    <div id="droppable" class="droppable"> 
                                    <p>Drop me here</p> 
                                    </div> 


   <style> 
.draggable {background-color:green; width: 90px; height: 80px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em; } 
.droppable { width: 300px; height: 300px; background-color:red} 

</style>

draggable,droppable

推荐阅读