0

目前正在尝试实现图像上传器。不幸的是，我不是 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);'

一些方向会有所帮助

4

1 回答 1

0

我能够通过在模板中添加一个 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>✔&lt;/span></div>\n  <div class=\"dz-error-mark\"><span>✘&lt;/span></div>\n  <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>\n</div>"
    };
于 2013-09-30T00:53:46.810 回答