• 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
     };

  • 相关阅读:
    P1439 【模板】最长公共子序列
    DP,入门???
    关于Eclipse在servlet中连接数据库时出现驱动加载失败的解决
    JSP学习(JavaBean)
    HTML随笔3
    CSS随笔3
    计算机网络随笔
    基本命令行操作1(java编译)
    Javascript随笔2(JQuery)
    Javascrip随笔1
  • 原文地址:https://www.cnblogs.com/standy225/p/3870536.html
Copyright © 2020-2023  润新知