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

  • 相关阅读:
    本地连不上远程mysql数据库(2)
    linux后台执行命令:&和nohup
    uva 10806 Dijkstra, Dijkstra. (最小费最大流)
    VS2013带来的&quot;新特性&quot;
    HDOJ 5091 Beam Cannon 扫描线
    2014百度之星资格赛4题
    二维码登陆
    安装Sublime配合quick-cocos2d-x开发
    J2SE核心开发实战(二)——字符串与包装类
    LeetCode_3Sum Closest
  • 原文地址:https://www.cnblogs.com/standy225/p/3870536.html
Copyright © 2011-2022 走看看