代码改变世界

javascript实现拖曳与拖放图片

2014-07-26 19:36 龙恩0707 阅读(...) 评论(...) 编辑 收藏

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