Как вы можете скопировать любое изображение SRC с одной стороны на другую сторону с помощью метода bind и url?

Question

Вы можете скопировать только одно изображение в область сброса с помощью метода связывания и URL с помощью JavaScript, но вы не можете изменить любое изображение,

я попробовал sourceImage = new Image (), но плагин работает только с URL

<div class="draggable">
   <img src='team.jpg' class="resizable ui-resizable draggable" style="width:300px"/>
</div>
<div class="draggable">
   <img src='foto11.jpg' class="resizable ui-resizable draggable" style="width:300px"/>
</div>
<div id="vanilla-demo" class='droppable' style="width:356px;height:286px;position:absolute;top:29.1em;left:73px;background-color: yellow">   
</div> 

<script>
    $(".draggable").draggable({cursor:"grabbing",helper:"clone",opacity:0.8,grid:[20,20]});
    $( ".droppable" ).droppable({
        op: function(event,ui) {
            vanilla.bind({
                url: 'team.jpg',
                orientation: 4
                });
            }
    });
    var el = document.getElementById('vanilla-demo');
    var vanilla = new Croppie(el, {
        viewport: { width: 300, height: 250 },
        boundary: { width: 300, height: 250 },
        showZoomer: true,
        enableOrientation: false
    });
    vanilla.bind({
        url: '',
        orientation: 4
    });
</script>

Я надеюсь, что URL-адрес показывает изображение при падении изображения,

Answer 1

Когда вы перетаскиваете предмет в предмет сброса, вы можете использовать ui.draggable, переданный в падение.

drop (событие, пользовательский интерфейс)

Срабатывает, когда на перетаскиваемом объекте сбрасывается принятое перетаскиваемое (на основе опции tolerance).

• событие

• ui

  • draggable Тип: jQuery Объект jQuery, представляющий перетаскиваемый элемент.

Рассмотрим следующий код.

$(function() {
  var el = $('#vanilla-demo');

  var vanilla = new Croppie(el[0], {
    viewport: {
      width: 300,
      height: 250
    },
    boundary: {
      width: 300,
      height: 250
    },
    showZoomer: true,
    enableOrientation: false
  });

  vanilla.bind({
    url: '',
    orientation: 4
  });

  $(".draggable").draggable({
    cursor: "grabbing",
    helper: "clone",
    opacity: 0.8,
    grid: [20, 20],
    zIndex: 1002
  });

  $(".droppable").droppable({
    classes: {
      "ui-droppable-hover": "ui-state-hover"
    },
    drop: function(event, ui) {
      var newImage = ui.draggable;
      vanilla.bind({
        url: newImage.attr("src"),
        orientation: 4
      });
    }
  });
});

.droppable {
  width: 356px;
  height: 286px;
  position: absolute;
  top: 29.1em;
  left: 73px;
  background-color: #cccccc;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.4/croppie.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.4/croppie.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="draggable">
  <img src='https://i.imgur.com/WDds7On.jpg' class="resizable ui-resizable draggable" style="width:300px" />
</div>
<div class="draggable">
  <img src='https://i.imgur.com/p77MNQh.jpg' class="resizable ui-resizable draggable" style="width:300px" />
</div>
<div id="vanilla-demo" class='droppable'></div>

Когда новый предмет отбрасывается, привязка обновляется для Кроппи.

Надеюсь, что поможет.