0

我在我的网站中实现了 2 个脚本：首先：InitDND()：这将在 2 个 div 之间进行拖放功能第二：DownloadDnD()：允许将选择的文件拖出到桌面（对于谷歌浏览器）我的问题是在那里一种允许同时执行这两个功能的方法，因为现在属性容器阻止我拖出文件。ps：我觉得google mail也有类似的功能

函数 InitDND()

var ax = "";
if (getUrlParameter('st') === 'list') {
    ax = "y";
}

$('.dragable-item').draggable({
    revert: "invalid",
    accept: "droppable-item",
    scroll: false,
    appendTo: 'body',
    containment: "window",

    //axis: ax,
    start: function (e, ui) { 
        $(".ui-draggable").not(ui.helper.css("z-index", "1"))
            .css("z-index", "0");
    }
});

$('.draggable-map-element').draggable({
    revert: "invalid",
    accept: "droppable-item",
    scroll: false,
    appendTo: 'body',
    containment: "window",
    axis: ax,
    start: function (e, ui) { 
        $(".ui-draggable").not(ui.helper.css("z-index", "1"))
            .css("z-index", "0");
    }
});

$('.itemboxthemeDropTargetPlaceholder, .droppable-container').droppable({
    hoverClass: "droppable-container-active",
    over: function (e, ui) {
        e.stopPropagation();
        e.preventDefault();
    },
    out: function (e, ui) {
    },
    drop: function (e, ui) {
        if ($(ui.draggable).hasClass('draggable-element') || $(ui.draggable).hasClass('draggable-map-element')) {

            var SouceId = $(ui.draggable).attr('id');
            var TargetId = $(this).attr('id');
            MoveItem(SouceId, TargetId, ui.draggable, $(this).data('url'));
        }

    },
    accept: function (d) {

        if (!d.hasClass("container-element")) {
            return true;
        }

    }

});

$('.droppable-item').droppable({
    accept: ".dragable-item",
    hoverClass: "folder-boxview-upload-visiblebox-hover",
    greedy: true,
    drop: function (e, ui) {
        if ($(ui.draggable).hasClass('dragable-item') || $(ui.draggable).hasClass('draggable-map-element')) {


            var SouceId = $(ui.draggable).attr('id');
            var x = $(this).attr('id');
            var TargetId = $(this).attr('id');

            MoveItem(SouceId, TargetId, ui.draggable, $(this).data('url'));

        }

    }
});

函数下载DnD()

    var files = document.querySelectorAll('.dragable-item');

    for (var i = 0; i < files.length; i++)
    {
    files[i].addEventListener('dragstart', function (e) {
        e.preventDefault();
        var aItemId = this.dataset.downloadurl;
        var sUrl = "@Url.Action("OpenFile", "File")?aItemId=" + aItemId;
        document.location = sUrl;
        //  e.dataTransfer.setData('DownloadURL', this.dataset.downloadurl);
        }, false);
    }
4

0 回答 0