Перетащите в метеор - PullRequest
Новая
       18

Перетащите в метеор

0 голосов
/ 01 марта 2019

Я пытаюсь использовать перетаскивание на фоновое изображение в 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>

1 Ответ

0 голосов
/ 05 марта 2019

Поняв, что в 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 (или идентификатор файла изображения загруженного изображения) и значения смещения x / y в коллекции и загрузить эти значения в * 1028.* s autorun рутина.

...