Jquery扩展了dropzone.js的功能

Question

目前正在尝试实现图像上传器。不幸的是，我不是javascript程序员，但幸运的是有人开发了 http://www.dropzonejs.com/。我试图增强这个JavaScript。我想实现的一件事是重新组织图像的能力。为此，将使用jquery。

下面是构成图像预览的所有 html 的示例。

<div class="dz-preview dz-processing dz-image-preview dz-success">
<div class="dz-details">
<div class="dz-filename">
<div class="dz-size" data-dz-size="">
<img data-dz-thumbnail="" alt="2.png" src="">
</div>
<div class="dz-progress">
<div class="dz-success-mark">
<div class="dz-error-mark">
<div class="dz-error-message">
</div>

所以我正在尝试创建允许我重新组织照片的代码。为此，我正在实现一些动画方法，然后一旦完成，我将使用 jquery 剪切并"粘贴"到新位置。

单击图像预览时用于 OnClick 的方法（当前未调用任何内容。

$( document ).ready(function() {
$('.dz-details:image').bind( "click", function(){
console.log('clicked');
    var pos1 = $('#demo-upload').position();
    $(this).animate({ 'top': pos1.top + 'px', 'left': pos1.left + 'px'}, 200, function(){
        //probably find position here and insert div
    });
});
});

当单击和拖动div 时，我可能会使用 .remove（）。 并使用类似于下面的内容将其插入新位置。

$(loca).append(div);'

一些方向会有所帮助

Answer 1

我能够通过在模板中添加javascript onclick方法调用来更改放置区.js

previewTemplate: "<div class="dz-preview dz-file-preview" onclick="moveDiv(this)" >n     <div class="dz-details">n    <div class="dz-filename"><span data-dz-name></span></div>n    <div class="dz-size" data-dz-size></div>n    <img data-dz-thumbnail />n  </div>n  <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>n  <div class="dz-success-mark"><span>✔</span></div>n  <div class="dz-error-mark"><span>✘</span></div>n  <div class="dz-error-message"><span data-dz-errormessage></span></div>n</div>"
    };