Search code examples
jquerydrag-and-dropcropit

cropit jQuery plugin - How to set up a custom drop zone?

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
Solution

  • 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.