Точное перетаскивание в пределах contenteditable

Настройки

Итак, у меня есть contenteditable div-я делаю редактор WYSIWYG: полужирный, курсив, форматирование, что угодно, и в последнее время: вставка причудливых изображений (в причудливом поле, с подписью).

<a class="fancy" href="i.jpg" target="_blank">
    <img alt="" src="i.jpg" />
    Optional Caption goes Here!
</a>

пользователь добавляет эти причудливые изображения с диалогом, который я им представляю: они заполняют детали, загружают изображение, а затем, как и другие функции редактора, я использую document.execCommand('insertHTML',false,fancy_image_html); чтобы плюхнуть его на выбор пользователя.

нужные Функциональность

Итак, теперь, когда мой пользователь может плюхнуться в причудливое изображение-они должны быть в состоянии перемещать его. Пользователь должен иметь возможность щелкнуть и перетащить изображение (fancy box и все), чтобы разместить его в любом месте, которое им нравится в contenteditable. Они должны быть в состоянии перемещать его между абзацами или даже внутри абзацев-между двумя словами, если они хотят.

что дает мне надежду

имейте в виду-в довольном, простом старом <img> теги уже благословлены пользователем-агентом с этой прекрасной возможностью перетаскивания. По умолчанию, вы можете перетащить <img> теги везде, где вам угодно; операция перетаскивания по умолчанию ведет себя так, как можно было бы мечтать.

Итак, учитывая, как это поведение по умолчанию уже работает так сокрушительно на нашем <img> друзья -- и я только хочу немного расширить это поведение, чтобы включить немного больше HTML -- это похоже на что-то это должно быть легко возможно.

Мои Усилия До Сих Пор

во-первых, я настроил свою фантазию <a> тег с перетаскиваемым атрибутом и отключенным contenteditable (не уверен, что это необходимо, но похоже, что он также может быть выключен):

<a class="fancy" [...] draggable="true" contenteditable="false">

затем, потому что пользователь все еще может перетащить изображение из фантазии <a> box, я должен был сделать некоторые CSS. Я работаю в Chrome, поэтому я показываю вам только префиксы-webkit, хотя я использовал другие тоже.

.fancy {
    -webkit-user-select:none;
    -webkit-user-drag:element; }
    .fancy>img {
        -webkit-user-drag:none; }

теперь пользователь может перетащить всю причудливую коробку, и маленькое частично выцветшее изображение представления щелчка-перетаскивания отражает это - я вижу, что теперь я забираю всю коробку:)

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

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

JavaScript перетаскивания HTML5 API

это перетаскивание вещи кажется сложнее, чем это должно быть.

Итак, я начал углубляться в dnd api docs, и теперь я застрял. Итак, вот что я подстроил (да, jQuery):

$('.fancy')
    .bind('dragstart',function(event){
        //console.log('dragstart');
        var dt=event.originalEvent.dataTransfer;
        dt.effectAllowed = 'all';
        dt.setData('text/html',event.target.outerHTML);
    });

$('.myContentEditable')
    .bind('dragenter',function(event){
        //console.log('dragenter');
        event.preventDefault();
    })
    .bind('dragleave',function(event){
        //console.log('dragleave');
    })
    .bind('dragover',function(event){
        //console.log('dragover');
        event.preventDefault();
    })
    .bind('drop',function(event){
        //console.log('drop');      
        var dt = event.originalEvent.dataTransfer;
        var content = dt.getData('text/html');
        document.execCommand('insertHTML',false,content);
        event.preventDefault();
    })
    .bind('dragend',function(event){ 
        //console.log('dragend');
    });

так вот где Я застрял: это почти полностью работает. практически полностью. у меня все работает, вплоть до самого конца. В событии drop у меня теперь есть доступ к HTML-контенту fancy box, который я пытаюсь вставить в место drop. Все, что мне нужно сделать сейчас, это вставить его в нужное место!

проблема я не могу найти правильное место, или любой способ, чтобы вставить его. я надеялся найти что-то вроде 'dropLocation' объект, чтобы сбросить мою причудливую коробку, что-то вроде dropEvent.dropLocation.content=myFancyBoxHTML;, или, возможно, по крайней мере, какие-то значения местоположения падения, с помощью которых я могу найти свой собственный способ поместить туда контент? мне что-нибудь дали?

я делаю это совершенно неправильно? Я что-то совсем упустил?

я пытался использовать document.execCommand('insertHTML',false,content); как я и ожидал, я должен быть в состоянии, но это, к сожалению, не удается мне здесь, поскольку каретка выбора не расположена в точном месте падения, как я надеюсь.

я обнаружил, что если я прокомментирую все event.preventDefault(); ' s, курсор выбора становится видимым, и, как можно было бы надеяться, когда пользователь готовится к падению, наведя их перетаскивание на contenteditable, можно увидеть, что маленький курсор выбора работает между символами, следующими за курсором пользователя и операцией перетаскивания, указывая пользователю, что курсор выбора представляет точное место падения. мне нужно расположение этого выбора каретки.

С некоторыми экспериментами я попробовал execCommand-inserthtml'ING во время события drop и события dragend-ни вставить HTML, где был dropping-selection-caret, вместо этого он использует любое место, выбранное до операции перетаскивания.

поскольку курсор выбора виден во время перетаскивания, я вылупился план.

некоторое время я пытался в событии dragover вставить временный маркер, например <span class="selection-marker">|</span>, сразу после $('.selection-marker').remove();, в попытке браузера постоянно (во время перетаскивания) удалять все маркеры выбора, а затем добавлять один в точку вставки-по существу, оставляя один маркер везде, где находится эта точка вставки, в любой момент. План, конечно, состоял в том, чтобы затем заменить этот временный маркер перетаскиваемым содержимым, которое у меня есть.

нет конечно, это сработало: я не мог заставить маркер выбора вставляться в явно видимый каретку выбора, как планировалось,-опять же, execCommand-insertedHTML помещал себя туда, где был каретка выбора, до операции перетаскивания.

Хафф. Так что же я пропустил? Как это делается?

как получить или вставить в точное местоположение операции перетаскивания? я чувствую, что это, очевидно, общая операция среди тащить-и-капель - наверняка я проглядел какую-то важную и вопиющую деталь? мне даже пришлось углубиться в JavaScript, или, может быть, есть способ сделать это только с такими атрибутами, как draggable, droppable, contenteditable и некоторые fancydancy CSS3?

я все еще на охоте-все еще возиться - я отправлю обратно, как только я узнаю, что я терпел неудачу в :)

---

охота продолжается (редактирование после оригинала post)

---

Фаррух опубликовал хорошее предложение -- use:

console.log( window.getSelection().getRangeAt(0) );

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

увы, объект Range, который возвращается, сообщает индексы смещения, которые принадлежат к каретке выбора до перетаскивания операция.

это была героическая попытка. Спасибо, Фаррух.

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

При Дальнейшем Осмотре!

оказывается, это самозванец! Элемент реальные курсор выбора остается на месте во время всей операции перетаскивания! Вы можете увидеть немного черт!

я читал MDN Drag and Drop Docs, и обнаружил это:

естественно,вам может потребоваться переместить маркер вставки вокруг события dragover. вы можете использовать свойства clientX и clientY события, как и другие события мыши, чтобы определить местоположение указателя мыши.

Yikes, означает ли это, что я должен выяснить это для себя, основываясь на clientX и clientY?? Используя координаты мыши, чтобы определить местоположение выбора каретки самостоятельно? Страшно!!

я рассмотрю это завтра - если только я сам или кто-то еще здесь, читая это, не сможет найти разумное решение :)