HTML5, перетаскиваемый и contentEditable не работают вместе

Question

Когда атрибут draggable включен для родительского элемента (<li>), я не могу заставить contenteditable работать с его дочерним элементом (<a>).

Основное внимание уделяется дочернему элементу (<a>), но я вообще не могу его редактировать.

Пожалуйста, проверьте этот образец

http://jsfiddle.net/pavank/4rdpV/11/

РЕДАКТИРОВАТЬ: я могу редактировать контент, когда я отключаю draggable на <li>

Answer 1

Сегодня я столкнулся с той же проблемой и нашел решение [с использованием jQuery]

$('body').delegate('[contenteditable=true]','focus',function(){
    $(this).parents('[draggable=true]')
            .attr('data-draggableDisabled',1)
            .removeAttr('draggable');
    $(this).blur(function(){
        $(this).parents('[data-draggableDisabled="1"]')
                .attr('draggable','true')
                .removeAttr('data-draggableDisabled');
    });
});

$('body') можно заменить на что-нибудь более конкретное.

Если новые элементы contenteditable не добавлены во время выполнения, можно использовать bind вместо delegate.

Answer 2

Имеет смысл, что свойства draggable и contenteditable столкнутся. contenteditable элементы, как и любое текстовое поле, будут фокусироваться на mousedown (не на щелчке). Элементы draggable работают на основе перемещения мыши, но также выбирает текст в элементе contenteditable. Как браузер определит, пытаетесь ли вы перетащить элемент или выделить текст? Поскольку свойства не могут сосуществовать в одном и том же элементе, похоже, вам нужно решение javascript.

Попробуйте добавить эти два атрибута в тег привязки:

onfocus="this.parentNode.draggable = false;"
onblur="this.parentNode.draggable = true;"

Это работает для меня, если я добавлю его в теги <a> в вашем jsFiddle. Вы также можете использовать jQuery, если это сложнее, чем получение parentNode.

Answer 3

При использовании html5sortable и более новых событий JQuery (делегат устарел, ответ через 3 года после первоначального вопроса), ошибка по-прежнему влияет на Chrome 37. Contenteditable spans и html5sortable, похоже, хорошо работают в других браузерах.Я знаю, что это только частично актуально, просто ведение документации об изменениях, которые я заметил.

$(document).on('focus', 'li span[contenteditable]', function() {
    $(this).parent().parent().sortable('destroy'); // removes sortable from the whole parent UL
});

$(document).on('blur', 'li span[contenteditable]', function() {
    $(this).parent().parent().sortable({ connectWith: '.sortable' }); // re-adds sortable to the parent UL
});

Answer 4

Примечание. Это обходной путь, поскольку я считаю, что невозможность совместной работы этих двух функций заключается в самой спецификации HTML (т. Е. не работающая вместе вещь является преднамеренной, поскольку браузер может 'не могу определить, хотите ли вы сосредоточиться или перетащить событие mousedown)

---

Я заметил, что вы явно указали «нет библиотек», поэтому я предоставлю необработанный ответ javascript / HTML5

http://jsfiddle.net/4rdpV/26/

Это была моя проблема.

Прежде всего, может быть лучше включить данные в один элемент localStorage, чем разбрасывать их.

storage={
    '1.text':'test 1',
    '2.text':'test 2'
}
if(localStorage['test']){
    storage=JSON.parse(localStorage['test'])
}

это создает эту возможность, используя JSON для преобразования между объектом и строкой.Объекты действительно могут быть вложенными

Я также добавил (edit) ссылки рядом с элементами, при щелчке по которым эти ссылки преобразуют элементы в input элементы, так что вы можете редактировать текст.После нажатия Enter, он преобразует его обратно и сохраняет данные.В то же время элементы списка остаются перетаскиваемыми.

После сохранения нажмите F12 в Chrome, найдите консоль и посмотрите на объект localStorage, вы увидите, что все данные были сохранены в localStorage['test'] какОбъект, использующий JSON.stringify()

Я старался изо всех сил, чтобы сделать его масштабируемым, и я думаю, что мне это удалось;вам просто нужно заменить HTML контейнером и использовать цикл javascript для записи нескольких элементов, используя выбранный итератор для заполнения параметра для edit().Например:

Скажем, вы изменили хранилище для хранения «парадигм» списков, и у вас есть один, называемый «список покупок».И скажем, объект хранения выглядит примерно так:

{
    "shopping list":{
         1:"Milk",
         2:"Eggs",
         3:"Bread"
    }
}

Это может сделать этот список таким:

for(i in storage['shopping list']){
    _item = storage['shopping list'][i];
    container.innerHTML+='<li draggable=true><a id="item'+i+'">'+_item+'</a><a href="#" onclick="edit('+i+')"> (edit)</a></li>'
}

Конечно, если бы вы редактировали структуру объекта хранения,вам также необходимо отредактировать функции.

Вывод будет выглядеть примерно так:

Milk (edit)
Eggs (edit)
Bread (edit)

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

Если вы не хотите, чтобы ссылки (edit) были видны, например, вы можете сделать это в CSS:

a[href="#"]{
    display:none;
}
li[draggable="true"]:hover a[href="#"]{
    display:inline;
}

Теперь ссылки для редактирования появятся только при наведении указателя мыши на элемент списка, например, эта версия:

http://jsfiddle.net/4rdpV/27/

---

Надеюсь, этот ответ помог.