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

  • 相关阅读:
    牛客小白月赛12 D 月月给华华出题 (欧拉函数,数论,线筛)
    牛客小白月赛12 F 华华开始学信息学 (分块+树状数组)
    牛客小白月赛12 C 华华给月月出题 (积性函数,线性筛)
    牛客小白月赛12 I 华华和月月逛公园 (tarjian 求桥)
    Tourist's Notes CodeForces
    Educational Codeforces Round 71 (Rated for Div. 2) E XOR Guessing (二进制分组,交互)
    Tunnel Warfare HDU
    蓝桥杯第三届总决赛
    HDU 1695(数论,筛选+素因子分解+容斥)
    lightoj 1248 Dice (III)(几何分布+期望)
  • 原文地址:https://www.cnblogs.com/standy225/p/3870536.html
Copyright © 2011-2022 走看看