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

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

当您将一个项目拖动到一个 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 的绑定会更新。

希望对您有所帮助。

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

how could you copy any src image from one side to another side droppable with method bind and url?

html

javascript

jquery

jquery-ui