zoukankan      html  css  js  c++  java
  • 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下载

  • 相关阅读:
    关于Maya Viewport 2.0 API 开发的介绍视频
    春节大假
    Some tips about the life cycle of Maya thread pool
    Can I compile and run Dx11Shader for Maya 2015 on my side?
    How to get current deformed vertex positions in MoBu?
    想加入全球首届的 欧特克云加速计划吗?
    三本毕业(非科班),四次阿里巴巴面试,终拿 offer(大厂面经)
    mac、window版编辑器 webstorm 2016... 永久破解方法。
    node 搭载本地代理,处理web本地开发跨域问题
    js 一维数组,转成嵌套数组
  • 原文地址:https://www.cnblogs.com/tugenhua0707/p/3870498.html
Copyright © 2011-2022 走看看