javascript - 您如何使用方法绑定(bind)和 url 将任何 src 图像从一侧复制到另一侧？

Question

您只能使用 bind 方法和 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

当您将一个项目拖动到一个 droppable 时，您可以使用传递给 drop 的 ui.draggable。

drop( event, ui )

Triggered when an accepted draggable is dropped on the droppable (based on the tolerance option).

• event

• ui

  • draggable Type: jQuery A jQuery object representing the draggable element.

考虑以下代码。

$(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>

当放下新元素时，Croppie 的绑定(bind)会更新。

希望对您有所帮助。