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

javascript实现拖曳与拖放图片