在流星中拖放

Question

我正在尝试在 div 中对背景图像使用拖放操作，但没有任何效果。我没有在流星中找到任何图像拖放模块。流星中是否有任何模块或任何默认功能来拖动背景图像。上传图片进入 div 背景后，我希望用户可以拖动该图片并设置它的位置。这是我在上传后在后台显示图像的代码。

<div id="edit-image" class="text-center {{page}} {{isIosDevices}} {{profileHeader}}" style="{{myCoverPicture}}">
                    {{> uploaderbg profileHeader="profileHeader" userProfile=this.profile fromProfile=true}}
                  </div>

======= 交互JS ==================

'click .text-center': function (e) {

    var isDraggable = interact('#test-img').draggable(); // true
}   

<div id="my-image" class="text-center" style="">
   <img src="{{myPicture}}" id="test-img" />
 </div>

============================================= ====

 Template.dragImgBg.onCreated(function helloOnCreated () {
  const instance = this;
  var ImageAxis1 = Meteor.user().profile.imageAxis;
  values=ImageAxis1.split(' ');

  instance.offsetx = new ReactiveVar(values[0]);
  instance.offsety = new ReactiveVar(values[1]);


  //console.log(ImageAxis1);
  // fixed in this example
  instance.bgUrl = new ReactiveVar(Meteor.user().profile.coverPicture);
})

Template.dragImgBg.helpers({
  offsetx() {
    return Template.instance().offsetx.get()
  },
  offsety() {
    return Template.instance().offsety.get()
  },
  bgUrl() {
    return Template.instance().bgUrl.get()
  }
})

let active = false

Template.dragImgBg.events({
  'mouseup' (/* event, templateInstance */) {
    active = false
  },
  'mouseout .img-bg-movable' (/* event, templateInstance */) {
    active = false
  },
  'mousedown .img-bg-movable' (/* event, templateInstance */) {
    active = true
  },
  'mousemove'(event, templateInstance) {

    if (!active) {
      return
    }
    const movementx = event.originalEvent.movementX;
    const movementy = event.originalEvent.movementY;

    const oldx = templateInstance.offsetx.get();
    const oldy = templateInstance.offsety.get();


    let data = $('#data_img_pos')[0]; 
    data.value = (oldx + movementx)+" "+(oldy + movementy);
    templateInstance.offsetx.set(oldx + movementx); 
    templateInstance.offsety.set(oldy + movementy);


  }
})



  <template name="dragImgBg">
    <div  id="edit-image" class="img-bg-movable bg-img text-center {{page}} {{isIosDevices}}" style="background-position: {{offsetx}}px {{offsety}}px;background-image: url({{bgUrl}});">
       {{> uploaderbg profileHeader="profileHeader" userProfile=this.profile fromProfile=true}}
    </div>
</template>

Answer 1

意识到这在使用第三方库的 Blaze 中并非易事后，我尝试编写一些自定义代码。

考虑以下模板：

<template name="dragImgBg">
    <div class="img-bg-movable" style="background-position: {{offsetx}}px {{offsety}}px;background-image: url({{bgUrl}});"></div>
</template>

具有以下（示例）CSS：

.img-bg-movable {
  width: 600px;
  height: 250px;
  overflow: hidden;
  border: solid 1px #AAAAAA;
  cursor: grab;
}

.img-bg-movable:active:hover {
  cursor: grabbing;
}

如您所见，div 正在动态接受样式，例如背景图片 url（您从上传的图片中获得的图片）和位置的 x / y 偏移量。

这些样式的值保存在像 ReactiveVar 这样的反应源中，并由简单的助手提供：

Template.dragImgBg.onCreated(function helloOnCreated () {
  const instance = this
  instance.offsetx = new ReactiveVar(0)
  instance.offsety = new ReactiveVar(0)
  // fixed in this example
  instance.bgUrl = new ReactiveVar('https://upload.wikimedia.org/wikipedia/commons/3/3f/Caldwell_68_Corona_Australis_Dark_Molecular_Cloud.jpg')
})

Template.dragImgBg.helpers({
  offsetx() {
    return Template.instance().offsetx.get()
  },
  offsety() {
    return Template.instance().offsety.get()
  },
  bgUrl() {
    return Template.instance().bgUrl.get()
  }
})

为了更改这些值（从而移动图像），需要一些事件来检查是否已按下鼠标左键并移动了鼠标。

如果是这样，鼠标移动的增量值将添加到反应偏移 x / y 源。如果鼠标被释放或移动到图像之外，则不会应用这些值。

let active = false

Template.dragImgBg.events({
  'mouseup' (/* event, templateInstance */) {
    active = false
  },
  'mouseout .img-bg-movable' (/* event, templateInstance */) {
    active = false
  },
  'mousedown .img-bg-movable' (/* event, templateInstance */) {
    active = true
  },
  'mousemove'(event, templateInstance) {
    if (!active) {
      return
    }
    const movementx = event.originalEvent.movementX
    const movementy = event.originalEvent.movementY

    const oldx = templateInstance.offsetx.get()
    const oldy = templateInstance.offsety.get()

    templateInstance.offsetx.set(oldx + movementx)
    templateInstance.offsety.set(oldy + movementy)
  }
})

originalEevnt 指的是模板的 jQuery 事件包装的原始事件。您可以自定义您需要的模板。

如果您知道例如图像的尺寸，您可以停止更新 offsetx 或 offsety 的位置到达这些边界。

如果你想让这个持久化（比如用户个人资料页面），你可以保存 bgUrl 的值（或上传图像的图像文件 ID）和偏移 x / y 值一个集合并将这些值加载到 onCreated 的 autorun 例程中。

在流星中拖放

Drag and Drop in meteor

file-upload

meteor