Jquery Пользовательский интерфейс: установка позиции перетаскивания перетаскиваемого элемента. - PullRequest
Новая
       16

Jquery Пользовательский интерфейс: установка позиции перетаскивания перетаскиваемого элемента.

0 голосов
/ 31 марта 2020

При отбрасывании перетаскиваемого элемента, реализованного с помощью jQuery пользовательского интерфейса, есть ли способ определить, какая часть перетаскиваемого элемента используется для определения целевой позиции / элемента опускания?

Например, я перемещаю 100x100 div в таблице, состоящей из 100x25 клеток. Прямо сейчас, целевая ячейка, кажется, определена центром вспомогательного div. Я бы хотел, чтобы целевая ячейка находилась в верхней части div.
Это представление календаря, где столбцы таблицы - это дни, а строки - время. Div представляет собой событие, и его высота может варьироваться в зависимости от продолжительности события. Важно, чтобы при перетаскивании события пользователь знал, куда оно упадет, чтобы время подходило. В настоящее время, если пользователь отбрасывает 2-часовое событие, чтобы верхняя часть находилась в 08:00, целевая ячейка в конечном итоге будет такой же, как в 09:00.
Я мог бы уменьшить визуальный вспомогательный элемент во время его перетаскивания. чтобы помочь с таргетингом, но я бы предпочел сохранить его в натуральную величину.

Визуальная помощь (черные квадраты, представляющие события):
Visual aid

Моя текущая реализация: 

$(this).draggable({snap: 'td.dropTd', snapTolerance: "10"})

РЕДАКТИРОВАТЬ: Вот пример кода. Консоль печатает ячейку, в которую помещается элемент. https://jsfiddle.net/akrzpvb2/2/

1 Ответ

0 голосов
/ 31 марта 2020

Рассмотрим следующий код.

Пример: https://jsfiddle.net/Twisty/r8h0asL3/4/

JavaScript

$(function() {
  for (var i = 1; i < 11; i++) {
    $('tbody').append('<tr><td id="a-' + i + '""></td><td  id="b-' + i + '""></td></tr>');
  }

  $('.dragDiv').draggable({
    containment: $("tbody"),
    snap: 'td',
    snapMode: 'inner',
    snapTolerance: "15"
  });
  $('tbody td').droppable({
    accept: '.dragDiv',
    drop: function(event, ui) {
      ui.draggable.css({
        top: "",
        left: ""
      }).appendTo(this);
    }
  });
});

Вы Здесь видно, что использованные вами методы snap находятся на правильном пути. Я добавил containment, чтобы пользователь не мог перетащить его из графика.

Для drop нам нужно удалить стилизацию позиции и затем добавить ее к цели перетаскивания.

Двигаясь вперед, вы можете рассмотреть возможность размещения DIV над столом. Таким образом, он может «покрывать» временные рамки, а не быть элементом внутри ячейки.

...