分享一個HTML5的drag and drop API實現的圖片拖拽分組效果

日期：2012-4-17  來源：GBin1.com

在線演示  本地下載

今 天咱們介紹HTML5的拖拽功能。基本目前全部的現代瀏覽器(Firefox，Chrome，Safari，或者Opera)都支持這個實用的功能。這意 味着咱們能夠考慮在咱們的項目和網站中使用這個功能。更重要的是代碼編寫很是簡單。咱們這裏將使用拖拽API開發一個圖片的分組排序功能 ，但願可以給你們比較直觀的使用感覺。但願你們喜歡！

HTML標籤

<div class="albums">
    <div class="album" id="drop_1" droppable="true"><h2>Album 1</h2></div>
    <div class="album" id="drop_2" droppable="true"><h2>Album 1</h2></div>
    <div class="album" id="drop_3" droppable="true"><h2>Album 3</h2></div>
</div>
<div style="clear:both"></div>
<div class="gallery">
    <a id="1" draggable="true"><img src="images/1.jpg"></a>
    <a id="2" draggable="true"><img src="images/2.jpg"></a>
    <a id="3" draggable="true"><img src="images/3.jpg"></a>
    <a id="4" draggable="true"><img src="images/4.jpg"></a>
    <a id="5" draggable="true"><img src="images/5.jpg"></a>
    <a id="6" draggable="true"><img src="images/6.jpg"></a>
    <a id="7" draggable="true"><img src="images/7.jpg"></a>
    <a id="8" draggable="true"><img src="images/8.jpg"></a>
    <a id="9" draggable="true"><img src="images/9.jpg"></a>
    <a id="10" draggable="true"><img src="images/10.jpg"></a>
    <a id="11" draggable="true"><img src="images/11.jpg"></a>
    <a id="12" draggable="true"><img src="images/12.jpg"></a>
</div>
<script src="js/main.js"></script>

你能夠看到這裏咱們設定了3個開放的drop對象和12個圖片。咱們將可drop的區域使用屬性droppable來標示，而且將可drag的對象用draggable來標示。

來源：分享一個HTML5的drag and drop API實現的圖片拖拽分組效果