Question

您只能使用bind方法将一个图像复制到可放置区域，并使用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>

我希望该网址在显示图像时显示该图像，

Answer 1

将项目拖到可放置对象时，可以使用传递到放置对象的ui.draggable。

放置（事件，用户界面）

在将可接受的可拖动对象放置在可放置对象上时触发（基于tolerance选项）。



事件



ui


可拖动的类型：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>

放置新项目时，将为Croppie更新绑定。

希望有帮助。

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

1 个答案: