Dropzone图像重新排序

时间:2015-08-21 08:03:39

标签: javascript jquery jquery-ui-sortable dropzone.js

我已经使用dropzone通过拖放将多张图片上传到我的服务器。首先,我选择所有图片,然后当我想上传时,按下按钮,所有文件都会上传。

我想更改上传的顺序,我正在使用此提示Is there a way to do drag-and-drop re-ordering of the preview elements in a dropzone.js instance?,我可以通过鼠标拖动更改顺序。

问题在于,当我上传的图片没有按照我已更改的顺序上传时,但是我们最初将它们放入dropzone中进行上传。

我的dropzone配置为此

DECLARE @User nvarchar(50) = 'jon.doe@abc.com'

SELECT DISTINCT
         STUFF(@User, CHARINDEX('@', @User), len(@User ), '') AS [User]

1 个答案:

答案 0 :(得分:0)

HTML将如下所示:

<div id="imageUpload" class="dropzone mt-2"></div>

并在js中添加此代码

$(".dropzone").sortable({
    items:'.dz-preview',
    cursor: 'grab',
    opacity: 0.5,
    containment: '.dropzone',
    distance: 20,
    tolerance: 'pointer',
    stop: function () {
      var queue = myDropzone.getAcceptedFiles();
      newQueue = [];
      $('#imageUpload .dz-preview .dz-filename [data-dz-name]').each(function (count, el) {           
            var name = el.innerHTML;
            queue.forEach(function(file) {
                if (file.name === name) {
                    newQueue.push(file);
                }
            });
      });
      myDropzone.files = newQueue;
    }
});

希望这会起作用。