拖放流星

Question

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

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

======= Interact 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正在动态接受样式，例如背景图片网址（从您上传的图片中获取的图片）和该位置的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的{​​{1}}例程中。