search

scottcheng / cropit

A "customizable crop and zoom" jQuery plugin.
http://scottcheng.github.io/cropit/
MIT License
874 stars 307 forks source link

How to set up a custom drop zone? #255

Closed trantorLiu closed 6 years ago

trantorLiu commented 6 years ago

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

This question is also posted on StackOverflow - https://stackoverflow.com/questions/45389233/cropit-jquery-plugin-how-to-set-up-a-custom-drop-zone

trantorLiu commented 6 years ago

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.