Nano Hash - криптовалюты, майнинг, программирование

RxJs Как работать с событиями документа

Начал использовать RxJs. Не могу найти способ обойти эту проблему. У меня есть перетаскиваемый элемент управления:

startDrag = rx.Observable.fromEvent(myElem,'mousedown')

теперь, поскольку элемент управления слишком мал, события mousemove и mouseup должны быть на уровне документа (иначе он не остановит перетаскивание, если курсор не находится точно на элементе)

endDrag = rx.Observable.fromEvent document,'mouseup'

position = startDrag.flatMap ->
   rx.Observable.fromEvent document,'mousemove'
   .map (x)-> x.clientX
   .takeUntil endDrag

теперь, как мне "поймать" нужный момент, когда его больше не тянут (mouseup). вы видите проблему с подпиской на endDrag? Он будет срабатывать при каждом щелчке в любом месте, а не только myElem Как проверить все 3 свойства одновременно? Он должен принимать только те document.mouseups, которые произошли точно после startDrag и position

Обновление: я имею в виду, что проблема не в перемещении элемента. Эта часть проста - подпишитесь на position, измените css элемента. Моя проблема в том, что мне нужно определить момент mouseup и узнать точный элемент, который был перетащен (на странице несколько элементов). Как это сделать я понятия не имею.

javascript rxjs
12.02.2015

Ответы:


1

Я адаптировал предоставленный пример перетаскивания в репозитории RxJS, чтобы вести себя так, как вам нужно.

Заметные изменения:

  • mouseUp слушает document.

  • Целевой элемент добавляется к возврату из select.

  • Движения перетаскивания обрабатываются внутри map, а map возвращает элемент, на который было направлено событие mouseDown.

  • Вызовите last после takeUntil(mouseUp) так subscribe будет достигнуто только после завершения процесса перетаскивания (один раз за перетаскивание).

Рабочий пример:

function main() {
  var dragTarget = document.getElementById('dragTarget');

  // Get the three major events
  var mouseup = Rx.Observable.fromEvent(document, 'mouseup');
  var mousemove = Rx.Observable.fromEvent(document, 'mousemove');
  var mousedown = Rx.Observable.fromEvent(dragTarget, 'mousedown');


  var mousedrag = mousedown.selectMany(function(md) {

    // calculate offsets when mouse down
    var startX = md.offsetX;
    var startY = md.offsetY;

    // Calculate delta with mousemove until mouseup
    return mousemove.select(function(mm) {
      if (mm.preventDefault) mm.preventDefault();
      else event.returnValue = false;

      return {
        // Include the targeted element
        elem: mm.target,
        pos: {
          left: mm.clientX - startX,
          top: mm.clientY - startY
        }
      };
    })
    .map(function(data) {
      // Update position
      dragTarget.style.top = data.pos.top + 'px';
      dragTarget.style.left = data.pos.left + 'px';

      // Just return the element
      return data.elem;
    })
    .takeUntil(mouseup)
    .last();
  });


  // Here we receive the element when the drag is finished
  subscription = mousedrag.subscribe(function(elem) {
    alert('Drag ended on #' + elem.id);
  });
}
main();
#dragTarget {
  position: absolute;
  width: 20px;
  height: 20px;
  background: #0f0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.7/rx.all.min.js"></script>
<div id="dragTarget"></div>

12.02.2015
  • Вау... спасибо, Джон! Кажется, это работает для меня невероятно хорошо. Черт. Rx может быть действительно запутанным для начинающих ... 12.02.2015
  • да, ключ в том, что вы помещаете takeUntil() внутри flatMap вместо flatMap, чтобы он применялся к отдельным перетаскиваниям, а не к общему наблюдаемому 12.02.2015
  • @Agzam рад, что вы нашли это полезным. Люблю копаться в таких проблемах :) 12.02.2015
  • @VishalSakaria да! С Rx можно делать действительно крутые вещи. 19.10.2016
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..