本文介绍了为什么我无法拖动跨度,而是使用img?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试创建一个textarea,在其中添加应在人物级别可拖动的HTML元素。这个问题是相关的,但这是GWT相关。为了创建这样的文本区域,我试图了解如何一步一步做到这一点。这是我到目前为止:





我没有真正能够测试这个,因为你的脚本会抛出一个错误,说你的函数 smartdrag 不存在。 / p>

尽管我对这个可能的解决方案充满了希望,因为它完全覆盖了您的问题,并且来自可靠的文档。


I am trying to create a textarea where I can add HTML elements which should be draggable on character level. This question is related to another I am currently asking but that is GWT related. In order to create such a text area I am trying to understand how to do it step by step. This is what I got so far:

JSFiddle

JavaScript:

function smartdrag(e) {

    var id = e.target.getAttribute('id');

    if (id!=='plzdragme' && id !== 'plzdragmeimg') {
        e.stopPropagation();
        e.preventDefault();
        return;
    }
}

HTML:

<div contenteditable="true" ondragstart="smartdrag(event)">
    More blah
    <img src="http://lorempizza.com/80/80/2" id="plzdragmeimg" draggable="true" class="fancy-img"/>
    about
    <span id="plzdragme" contenteditable="false" class="fancy" draggable="true">DRAGME</span>
    Sparta!
</div>

But for some reason I can only drag the img. What I actually need is to be able to drag a span or even better a div..

How can I accomplish that?

PS: Please no jQuery if possible.

解决方案

I googled around a bit to see how HTML5 dragging works, and I found that in order to get a DOM element to be draggable, you have to add the new 'draggable' attribute to it, and set it to true. The confusing part about your problem is that images and links are draggable by default!

I wasn't really able to test this well because your script throws an error saying your function smartdrag does not exist.

Though I'm pretty hopeful about this possible solution as it covers your problem entirely, and comes from a trustworthy documentation.

这篇关于为什么我无法拖动跨度,而是使用img?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-05 12:16
查看更多