javascript實現拖曳與拖放圖片

龍恩0707發表於2014-07-26
JavaScript

javascript實現拖曳與拖放圖片

     其實對於drag和drop拖曳與拖放事件IE很早以前就支援這個操作了，我們先來看看HTML5中新增的拖放API。

  在HTML5中想要實現拖放操作，至少要做以下操作：

 1. 將要拖放的物件元素的draggable屬性設定為true，即(draggable="true"),這樣才能拖放該元素，且img元素與a元素(必須指定href)預設允許拖放操作。如程式碼：

<li draggable="true">Item 1</li>

 2. 編寫與拖放有關的事件處理程式碼，有以下事件需要我們知道的。如下：

   1): dragstart:   當拖拽元素開始被拖拽的時候觸發的事件，此事件作用在被拖曳元素上.

   2): drag:        拖放過程中觸發的事件，此事件作用在被拖放到元素上。

   3): dragenter:   拖放元素進入目標元素觸發的事件，此事件作用在目標元素上。

   4): dragover:    拖拽元素在目標元素上移動的時候觸發的事件，此事件作用在目標元素上.

   5): dragleave:   被拖放到元素離開目標元素的時候，此事件作用在目標元素上。

   6): drop:         有其他元素被拖放到目標元素上，此事件作用在目標元素上。

   7): dragend:      拖放操作結束：此事件作用在拖放元素上。

3. DataTransfer物件：

   dropEffect屬性
  表示拖放操作的視覺效果，允許設定其值，該效果必須在用effectAllowed屬性指定的允許的視覺效果範圍之內，允許指定的值有：none,copy,link,move
 effectAllowed屬性  用來指定當元素被拖放時所允許的視覺效果，可以指定的值有none,copy,copyLink,copyMove,link,linkMove,move,all,unintialize.

先了解這些內容對於我們現在這個demo來說已經夠了！具體的想多瞭解可以去看看HTML5中的拖放與拖曳API。

我們可以先來看看JSFiddler中的效果：

你可以狠狠的點選這裡：javascript實現拖放與拖曳圖片的DEMO

所有的JS程式碼如下：

/**
 * javascript拖放元素
 */ 

 function Sortable(cfg){
    
    this.cfg = $.extend({},defaults,cfg || {});
    this._init();
 };
 $.extend(Sortable.prototype,{
    // 函式初始化
    _init: function(){
        var self = this;
        var cfg = self.cfg;
        if(cfg.container == null) {return;}
        var placeholders = $(),
            dragging;

        // 該容器下的子元素
        $(cfg.container).each(function(index,curItem){
            var items = $(curItem).children();
            var placeholder = $('<' + items[0].tagName + ' class="sortable-placeholder">');
            placeholders = placeholders.add(placeholder);

            items.attr("draggable","true").on('dragstart',function(e){
                var dt = e.originalEvent.dataTransfer;
                dt.effectAllowed = 'move';
                index = (dragging = $(this)).index();
            }).on('dragend',function(e){
                dragging.fadeIn();
                placeholders.detach();
            }).not('a[href], img').on('selectstart', function() {   //禁止滑鼠選中文字
                this.dragDrop && this.dragDrop();
                return false;
            }).end().add([this, placeholder]).on("dragover dragenter drop",function(e){
                if (e.type == 'drop') {
                    e.stopPropagation();
                    placeholders.filter(':visible').after(dragging);
                    return false;
                }
                e.preventDefault();
                e.originalEvent.dataTransfer.dropEffect = 'move';
                if (items.is(this)) {
                    dragging.hide();
                    $(this)[placeholder.index() < $(this).index() ? 'after' : 'before'](placeholder);
                    placeholders.not(placeholder).detach();
                }
                return false;
            });
        });
        
    }
 });

 var defaults = {
    container           :   null
 };

程式碼初始化如下：

new Sortable({
    "container": '.demoList'
});

container：是指要拖放的容器。其他任何操作不需要，html程式碼還是和往常一樣書寫，至於draggable="true"這個屬性，JS裡面會自動為當前容器的子元素增加這個屬性，所以對於使用者可以不用關心這些細節的操作；比如上面的demo HTML程式碼 可以和往常一樣寫：

如HTML程式碼如下：

<ul class="connected list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
</ul>

加上CSS如下：

h1, h2 {
    text-align: center;
    font-weight: normal;
}
.connected li, .sortable li{
    list-style: none;
    border: 1px solid #CCC;
    background: #F6F6F6;
    font-family: "Tahoma";
    color: #1C94C4;
    margin: 5px;
    padding: 5px;
    height: 22px;
}
li.highlight {
    background: #FEE25F;
}
.connected {
    float: left;
    width: 200px;
            
}
.connected.no2 {
    float: right;
}
li.sortable-placeholder {
    border: 1px dashed #CCC;
    background: none;
}

複製上面的JS，然後程式碼初始化就這樣，就ok了 如下初始化：

new Sortable({
    "container": '.connected'
});

demo下載

相關文章