รับทําเว็บไซต์ รับทําseo
บทความที่น่าสนใจ

บทความ ที่น่าสนใจ

การลากและวางวัตถุด้วย HTML5 drag and drop

    drag and drop คือการคลิกที่วัตถุค้างเอาไว้ แล้วลากไปวางยังพื้นที่ ที่ต้องการ โดยการลากไปวางนั้นวัตถุจะเคลื่อนที่ตามเคอร์เซอร์เมาส์ไปด้วย จนกว่าเราจะปล่อยมือจากการคลิกเมาส์ วัตถูก็จะมาอยู่ที่ตำแหน่งใหม่ ซึ่งการ drag and drop จะช่วยให้เราสามารถย้ายวัตถุได้อย่างอิสระตามต้องการ

     

    event ที่น่าสนใจคือ

    - ondragenter
    - ondragover
    - ondrop

     

    ตัวอย่าง

     <html>
    <head>
    <style type="text/css">
    #div1 {width:350px;height:200px;padding:10px;border:1px solid #aaaaaa;}
    </style>
    <script>
    function allowDrop(ev)
    {ev.preventDefault();}
     
    function drag(ev)
    {ev.dataTransfer.setData("Text",ev.target.id);}
     
    function drop(ev)
    {ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));}
    </script>
    </head>
    <body>
     
    <p>Drag the Koala image into the rectangle:</p>
     
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <br>
    <img id="drag1" src="http://images.temppic.com/20-10-2012
    /images_vertis/1350706157_0.24874200.jpg" draggable="true" ondragstart="drag(event)" width="300" height="180">
     
    </body>
    </html>
     

    จากตัวอย่าง 

    1. เราสามารถลากภาพ ไปใส่ในกรอบสี่เหลี่ยมได้ ด้วยแท็กนี้ และหากเราต้องการล๊อกภาพให้อยู่กับที่ไม่ให้ย้ายไปย้ายมาได้ ก็ให้เปลี่ยนจากคำว่า true เป็น false
     
    <img draggable="true"> 
     
    2. แท็กใส่รูปภาพ ที่ต้องการให้ลากได้ <img id="drag1" src="/ ใส่ URL ของภาพ " 
     
    3. ตรงนี้จะเป็น การสร้างกรอบสำหรับวางภาพ ในตัวอย่างนี้ ยาว 350 พิกเซล และ กว้าง 200 พิกเซล มีเส้นกรอบหนา 1 พิกเซล และมีคำว่า  function allowDrop(ev)  ซึ่งหมายถึงยอมให้ภาพสามารถวางที่จุดนี้ได้
     
    <style type="text/css">
    #div1 {width:350px;height:200px;padding:10px;border:1px solid #aaaaaa;}
    </style>
    <script>
    function allowDrop(ev)
     
     

     

บทความที่น่าสนใจ

บทความ ล่าสุด

บทความ ความรู้ด้านไอที, คอมพิวเตอร์ Techonlogy, Gadget, ความรู้เกี่ยวกับคอมพิวเตอร์ กับทาง SoftMelt.com