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下载