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方法调用来改变dropzone.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>"
    };

Jquery扩展了dropzone.js的功能

1 个答案: