ChaseMoskal具有使用CONTENTEDITABLE = 「真」 一個很好的解決問題的辦法：
HTML
<!--==== DragonDrop Demo HTML
Here we have two contenteditable <div>'s -- they have a dashed bottom-border dividing them, and they contain various text content. The first <div> contains structured block content, and the second <div> contains Unstructured, unwrapped content.
====-->
<div contenteditable="true">
<h1>Athenagora Lenoni Incommunicabile: Structured Content</h1>
<h2>Cellam modico illius ergo accipiet si non ait est Apollonius.</h2>
<a class="fancy">
<img src="http://imageshack.us/scaled/landing/809/picture195z.jpg" />
<caption>Hola!</caption>
</a>
<p>Volvitur ingreditur lavare propter increparet videns mihi cum. Tharsis ratio puella est Apollonius in deinde plectrum anni ipsa codicellos, jesus Circumdat flante vestibus lumine restat paralyticus audi anim igitur patriam Dianae. 'Iuraveras magnifice ex quae ad per te sed dominum sit Mariae Bone de his carpens introivit filiam. Plus damna nautis unum ad te. Puto suam ad quia iuvenis omnia. Etiam quantitas devenit regi adhibitis sedens loculum inveni.</p>
</div>
<div contenteditable="true">
<strong>Unstructured Content:</strong> Toto determinata se est se ad te finis laeta gavisus, laetare quod una non ait mea ego dum est Apollonius. Intrarem puella est in deinde cupis ei Taliarchum in, tharsiam vis interrogat Verena est Apollonius eius ad suis. Antiochus ac esse more filiam sunt forma ait Cumque persequatur sic. Imas rebum accusam in fuerat est se sed esse ait Cumque ego. Secundis sacerdotem habemus ibi alteri ad quia, agere videre Proicite a civitas exulto haec. Supponite facultatibus actum dixit eos. Neminem habere litore in deinde duas formis. Quattuordecim anulum ad nomine Hesterna studiis ascende meae puer ut sua, eiusdem ordo quos annorum afferte Apollonius non ait in.
<br /><br />
Deducitur potest contremiscunt eum ego Pentapolim Cyrenaeorum tertia navigavit volente in fuerat eum istam vero cum obiectum invidunt cum. Christe in rei sensibilium iussit sed, scitote si quod ait Cumque persequatur sic. Amet consensit cellula filia in rei civibus laude clamaverunt donavit potest flens non solutionem innocentem si quod ait. Una Christi sanguine concomitatur quia quod non coepit, volvitur ingreditur est Apollonius eius non potentiae. Coepit cenam inhaeret Visceribusque esocem manibus modi regiam iriure dolore. Filiam in rei finibus veteres hoc ambulare manu in fuerat eum istam provoces.
</div>
<button name="toggleContentEditable">disable contenteditable</button>
CSS
/*====== DragonDrop Demo CSS
Basically, user-select, and user-drag (and all their prefixes) need to be set in a way that lets the browser know which parts of our draggable element are selectable and draggable and which aren't.
So I guess this is that.
======*/
@charset utf-8;
/* these rules only apply to fancy boxes when contenteditable is true: they are necessary for the drag-and-drop demo to work correctly */
[contenteditable="true"] .fancy {
/**/-moz-user-select:none;-webkit-user-select:none;
user-select:none; /* without this line, element can be dragged within itself! No-no! */
/**/-moz-user-drag:element;-webkit-user-drag:element;
user-drag:element; /* makes the whole fancy box draggable */
cursor:move !important; } /* switches to the move cursor */
[contenteditable="true"] .fancy * {
/**/-moz-user-drag:none;-webkit-user-drag:none;
user-drag:none; } /* hopefully disables the internal default dragging of the img */
/*====== Everything below this area
is STRICLY for STYLE
and VISUAL APPEAL.
It shouldn't concern you. ======*/
html,body{ height:100%; }
[contenteditable] {
background:#f8f8f8; box-sizing:border-box; padding:2%; min-height:auto;
font-size:10px; font-family:sans-serif; color:#444;
border-bottom:2px dashed #888; }
.fancy {
display:inline-block; margin:10px;
color:#444; text-align:center; font-style:italic;
font-size:10px; font-family:sans-serif;
background:#fff; border:8px solid white;
box-shadow:1px 2px 8px #444;
cursor:pointer; }
.fancy img {
display:block; margin-bottom:2px;
border:1px solid white;
box-shadow:0 1px 6px #888; }
.fancy .caption { max-width:100px; }
h1 { font-weight:bold; font-size:1.4em; }
h2 { font-weight:bold; font-style:italic; text-indent:2px; }
p { text-indent:8px; }
strong { font-weight:bold; }
button { display:block; margin:6px auto; }
的Javascript
/*
==== Dragon Drop: a demo of precise DnD
in, around, and between
multiple contenteditable's.
=================================
== MIT Licensed for all to use ==
=================================
Copyright (C) 2013 Chase Moskal
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
============
*/
function DRAGON_DROP (o) {
var DD=this;
// "o" params:
DD.$draggables=null;
DD.$dropzones=null;
DD.$noDrags=null; // optional
DD.dropLoad=null;
DD.engage=function(o){
DD.$draggables = $(o.draggables);
DD.$dropzones = $(o.dropzones);
DD.$draggables.attr('draggable','true');
DD.$noDrags = (o.noDrags) ? $(o.noDrags) : $();
DD.$dropzones.attr('dropzone','copy');
DD.bindDraggables();
DD.bindDropzones();
};
DD.bindDraggables=function(){
DD.$draggables = $(DD.$draggables.selector); // reselecting
DD.$noDrags = $(DD.$noDrags.selector);
DD.$noDrags.attr('draggable','false');
DD.$draggables.off('dragstart').on('dragstart',function(event){
var e=event.originalEvent;
$(e.target).removeAttr('dragged');
var dt=e.dataTransfer,
content=e.target.outerHTML;
var is_draggable = DD.$draggables.is(e.target);
if (is_draggable) {
dt.effectAllowed = 'copy';
dt.setData('text/plain',' ');
DD.dropLoad=content;
$(e.target).attr('dragged','dragged');
}
});
};
DD.bindDropzones=function(){
DD.$dropzones = $(DD.$dropzones.selector); // reselecting
DD.$dropzones.off('dragleave').on('dragleave',function(event){
var e=event.originalEvent;
var dt=e.dataTransfer;
var relatedTarget_is_dropzone = DD.$dropzones.is(e.relatedTarget);
var relatedTarget_within_dropzone = DD.$dropzones.has(e.relatedTarget).length>0;
var acceptable = relatedTarget_is_dropzone||relatedTarget_within_dropzone;
if (!acceptable) {
dt.dropEffect='none';
dt.effectAllowed='null';
}
});
DD.$dropzones.off('drop').on('drop',function(event){
var e=event.originalEvent;
if (!DD.dropLoad) return false;
var range=null;
if (document.caretRangeFromPoint) { // Chrome
range=document.caretRangeFromPoint(e.clientX,e.clientY);
}
else if (e.rangeParent) { // Firefox
range=document.createRange(); range.setStart(e.rangeParent,e.rangeOffset);
}
var sel = window.getSelection();
sel.removeAllRanges(); sel.addRange(range);
$(sel.anchorNode).closest(DD.$dropzones.selector).get(0).focus(); // essential
document.execCommand('insertHTML',false,'<param name="dragonDropMarker" />'+DD.dropLoad);
sel.removeAllRanges();
// verification with dragonDropMarker
var $DDM=$('param[name="dragonDropMarker"]');
var insertSuccess = $DDM.length>0;
if (insertSuccess) {
$(DD.$draggables.selector).filter('[dragged]').remove();
$DDM.remove();
}
DD.dropLoad=null;
DD.bindDraggables();
e.preventDefault();
});
};
DD.disengage=function(){
DD.$draggables=$(DD.$draggables.selector); // reselections
DD.$dropzones=$(DD.$dropzones.selector);
DD.$noDrags=$(DD.$noDrags.selector);
DD.$draggables.removeAttr('draggable').removeAttr('dragged').off('dragstart');
DD.$noDrags.removeAttr('draggable');
DD.$dropzones.removeAttr('droppable').off('dragenter');
DD.$dropzones.off('drop');
};
if (o) DD.engage(o);
}
$(function(){
window.DragonDrop = new DRAGON_DROP({
draggables:$('.fancy'),
dropzones:$('[contenteditable]'),
noDrags:$('.fancy img')
});
// This is just the enable/disable contenteditable button at the bottom of the page.
$('button[name="toggleContentEditable"]').click(function(){
var button=this;
$('[contenteditable]').each(function(){
if ($(this).attr('contenteditable')==='true') {
$(this).attr('contenteditable','false');
$(button).html('enable contenteditable');
} else {
$(this).attr('contenteditable','true');
$(button).html('disable contenteditable');
}
});
});
});
小提琴：
http://jsfiddle.net/ChaseMoskal/T2zHQ/
只是一般的問題：你避免像jQuery框架以任何理由？或者這是否必須是純JS？ – Hless
@Hless在我的項目中，我使用angular.js和jQlite。 jQuery的口號是***寫少，做得更好***這個問題不是代碼的數量，它是如何做到這一點。我的意思是，我用jQuery的答案很好，因爲一旦我看到答案的重點是什麼，那麼我將沒有問題寫在香草 – iConnor
我看到你的代碼中有
，但沒有塊。這將是非常痛苦的處理。我會試着去看看我能做些什麼，但是，你需要一個「快照」效果還是我們可以使用絕對定位？ – TecHunter