1

I'm using cropit - a "customizable crop and zoom" jQuery plugin.

The following code is the HTML structure used by cropit. And by default, users can drag and drop images onto .cropit-preview-image-container. My question is that how can I set up a custom drop zone? Since I want a drop zone larger than the image size.

.cropit-preview
  .cropit-preview-background-container
    img.cropit-preview-background
  .cropit-preview-image-container
    img.cropit-preview-image
Trantor Liu
  • 8,770
  • 8
  • 44
  • 64

1 Answers1

1

Ok I found out how to do it.

var cropit = $('.image-editor').data('cropit');

$('.dropzone').on('dragover dragleave', cropit.onDragOver.bind(cropit));
$('.dropzone').on('drop', cropit.onDrop.bind(cropit));

In this way, when you drop an image on .dropzone, the image will replace img.cropit-preview-image.

Trantor Liu
  • 8,770
  • 8
  • 44
  • 64