สร้าง Drag and Drop วัตถุด้วย jQuery โดยไม่ใช้ plug in อย่างง่าย

15 November 2008 เขียนเมื่อ 16 ปีก่อน โดย Ninenik Narkdee

plugin jquery drag and drop php

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ plugin jquery drag and drop php

ดูแล้ว 20,942 ครั้ง

Javascript Code

<script language="javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(function(){
    function drag_me(name){
        $(name).css({
            position:"absolute",
            cursor:"move"
        });
        $(name).mousedown(function(event){
            var locateX=event.pageX;
            var locateY=event.pageY;    
            var obj_locateX=$(this).offset().left;
            var obj_locateY=$(this).offset().top;       
            var diff_x=locateX-obj_locateX; 
            var diff_y=locateY-obj_locateY;         
            $(this).css("opacity",0.3).mousemove(function(event){
                locateX=event.pageX;
                locateY=event.pageY;    
                obj_locateX=$(this).offset().left;
                obj_locateY=$(this).offset().top;               
                new_locateX=locateX-diff_x;;        
                new_locateY=locateY-diff_y;                         
                $(this).css({
                    left:new_locateX,
                    top:new_locateY
                }).bind("mouseup mouseout",function(){      
                    $(this).css("opacity",1);
                    $(this).unbind("mousemove");        
                });                 
            });
        });
    }   
     
// การใช้งาน กำหนด selector วัตถุที่ต้องการ
// ในตัวอย่างคือ div ที่มี id เท่ากับ myblock           
drag_me("div#myblock");
});
</script>

CSS และ HTML Code

<style type="text/css">
div#myblock{
    position:relative;
    width:150px;height:150px;
    display:block;
    background-color:#FF9966;
    border:#6699CC 1px solid;
    cursor:move;
}
</style>
 
<div id="myblock">
 
</div>

ตัวอย่างผลลัพธ์

คลิกค้างแล้วลากไปตามตำแหน่งที่ต้องการ

กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ