zoukankan      html  css  js  c++  java
  • javascript实现拖曳与拖放图片

    /**
     * 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();

                    //use_without_xxe_avoidance_config
                    }
                    return false;
                });
            });
           
        }
     });

     var defaults = {
        container           :   null
     };

  • 相关阅读:
    asp.net大文件(视频)分片上传
    numpy.argmin
    python-Numpy学习之(一)ndim、shape、dtype、astype的用法
    matlab设置小数位数
    利用Open3D进行点云可视化
    dell5820参数
    CUDA与cuDNN
    Ubuntu16.04更换cudnn版本
    二进制格式保存文件np.save和np.load-Numpy数组的保存与读取方法
    python pickle存储、读取大数据量列表、字典数据的方法
  • 原文地址:https://www.cnblogs.com/standy225/p/3870536.html
Copyright © 2011-2022 走看看