Заказывать предложения с элементами span? - PullRequest
Новая
       2

Заказывать предложения с элементами span?

0 голосов
/ 28 сентября 2018

Я действительно пытался найти ответ, но ничто не приблизилось.Я хочу иметь возможность изменить порядок предложений, то есть перетаскивать их.Но я также хочу, чтобы они были редактируемыми.О, да, желательно без jquery или чего-то подобного ...

Было бы полезно иметь, например, переключатель ctr, contenteditable, если необходимо переключаться между редактированием и переупорядочением.Но я не могу понять, как событие перетаскивания может определить позицию для его отбрасывания.

<!DOCTYPE html>
<html>
<style>
.sentence1 {color: blue;}
.sentence2 {color: red;}
.sentence3 {color: green;}
</style>
<body>
<div class="paragraph">
<span id="three" class="sentence3" contenteditable="true" >This is really the third sentence.</span>
<span id="one" class="sentence1" contenteditable="true" >This is really the first sentence.</span> 
<span id="two" class="sentence2" contenteditable="true" >This is really the second sentence.</span> 
</div>

Я подумал, что это может быть полезно для некоторых, если будет решено, поэтому я не предоставил больше кода, с которым пытался и не смог.Любые предложения приветствуются!

Ответы [ 3 ]

0 голосов
/ 29 сентября 2018

Я приготовил маленькую песочницу, с которой можно поиграть.Скрипка в нижней части. 

var SPANs = document.getElementsByTagName("span");

document.body.addEventListener("keydown", function (event) {
    if (event.key === "Control") {
      Array.prototype.forEach.call(SPANs, function (item) {
      item.setAttribute("contenteditable", false);
    });
  }
});

document.body.addEventListener("keyup", function (event) {
  Array.prototype.forEach.call(SPANs, function (item) {
    item.setAttribute("contenteditable", true);
  });
});

Array.prototype.forEach.call(SPANs, function (item) {
  item.addEventListener("drag", function (event) {
    console.log("Moving element");
  }, false);
});

Скрипка с небольшим кусочком кода JS

0 голосов
/ 01 октября 2018

Итак, это кажется довольно сложным, как я сформулировал вопрос выше, даже если это выполнимо.

Я думаю, что, например, sortable.js (который не является jquery) - это одна из возможностей.

Я закончил тем, что пытался сделать что-то, используя вместо этого vue, причина в том, что легче сохранить объект данных для сортировки и редактирования и использовать виртуальные домены для отображения по мере необходимости при необходимости.Спасибо всем за предложения!

0 голосов
/ 29 сентября 2018

Чтобы сделать что-то перетаскиваемое ... (это может быть довольно длинным, поэтому просто перечисление шагов, а не кода, если у кого-то есть энергия, чтобы написать это, не будет винить вас за другой ответиз этого.)

Шаг 1. Сделайте положение div поп-ап вверх по z, когда мышь / касание вниз, и переместите положение относительно окна на основе положения мыши / касания.

Шаг 2. Сделайтевсе потенциальные позиции размещения прослушиваются в мышином или эквивалентном (часто JavaScript делает временные деления высоты 1 или 0 между существующими.)Если мышь / касание уходит, сделайте их неактивными.

Шаг 3а.Если mouseup / endtouch, когда потенциальный div размещения активен, замените его на span.

Шаг 3b.Если mouseup / endtouch при отсутствии активного div размещения, удалите временные div и поместите выбранный div обратно туда, где он был.

(Примечание. Перетаскивание JavaScript не поддерживается в достаточном количестве мобильных браузеров.на данный момент. Через несколько лет, вероятно, будет сделан выбор в пользу лучшего маршрута)

...