所以,我有一个令人满意的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);它来根据用户的选择进行填充.
所以,现在我的用户可以拍摄一个奇特的图像 - 他们需要能够移动它.用户需要能够单击并拖动图像(花式框和所有图像),以便将其放置在满足其中的任何位置.他们需要能够在段落之间移动,甚至在段落之间 - 如果他们想要的话,在两个单词之间移动它.
请记住 - 在一个可信的,简单的旧<img>标签已经被用户代理祝福,具有这种可爱的拖放功能.默认情况下,您可以将<img>标签拖放到任何地方; 默认的拖放操作就像人们梦寐以求的那样.
所以,考虑一下这种默认行为如何对我们的<img>伙伴们如此有用- 我只想稍微扩展这种行为以包含更多的HTML - 这似乎应该是容易实现的.
首先,我<a>使用draggable属性设置我的花哨标签,并禁用contenteditable(不确定是否有必要,但似乎它可能也是关闭):
<a class="fancy" [...] draggable="true" contenteditable="false">
然后,因为用户仍然可以将图像拖出花哨的<a>盒子,我不得不做一些CSS.我在Chrome上工作,所以我只向你展示-webkit-前缀,尽管我也使用了其他的.
.fancy {
-webkit-user-select:none;
-webkit-user-drag:element; }
.fancy>img {
-webkit-user-drag:none; }
现在,用户可以拖动整个花哨的盒子,并且稍微部分褪色的点击拖动表示图像反映了这一点 - 我可以看到我现在正在拿起整个盒子:)
我已经尝试了几种不同CSS属性的组合,上面的组合似乎对我有意义,并且似乎效果最好.
我希望只有这个CSS就足以让浏览器使用整个元素作为可拖动的项目,自动向用户授予我一直梦寐以求的功能...... 然而,它似乎比这更复杂.
这种拖放似乎比它需要的更复杂.
所以,我开始深入研究DnD api文档,现在我被卡住了.所以,这就是我所操作的(是的,jQuery):
$('.fancy')
.bind('dragstart',function(event){
//console.log('dragstart');
var dt=event.originalEvent.dataTransfer;
dt.effectAllowed …