停止作为图像拖动目标的文本区域

Question

我在页面上有各种元素可以拖到不同的拖放区。但是对于 textarea，我无法找到一种方法向用户显示适合不同区域的可拖动图像可能不会放在 textarea 中。

我尝试了处理 ondragenter 和 ondragover 事件的各种组合，但是当图像被拖动到​​ textarea 上时，无法显示“no drop”图标。

有很多关于如何让拖放区接受所有内容的教程和提示。我想知道如何制作 dropzone 和 textarea 特别是拒绝拖动项目。不能为该项目启用拖动行为，因为还有其他区域应该接受该图像。

这个 JS fiddle 显示默认情况下可以将图像拖到文本区域中，从而显示 URL。我希望得到一些帮助，向我展示如何阻止这种情况。

function dragstart(event) {//stuff}

function dragenter(event) {event.preventDefault();}

function dragover(event) {event.preventDefault();}

function dragdrop(event) {event.preventDefault();}

http://jsfiddle.net/mWKd3/16/

Answer 1

您没有绑定/附加您的事件，对于属性 ondragstart、ondragenter、ondragover、 和 ondragdrop 未定义。

这是一个显示它的新小提琴http://jsfiddle.net/mWKd3/18/

In-Short - Javascript（我使用 jQuery 附加事件）

$("img").bind("dragstart",function(e){
});

$("textarea").bind("dragenter",function(e){
    e.preventDefault();
});

$("textarea").bind("dragover",function(e){
    e.preventDefault();
});

$("textarea").bind("dragdrop",function(e){
    e.preventDefault();
});

以下是进行拖放的另一种方法。

引用 http://css-tricks.com/snippets/jquery/draggable-without-jquery-ui/ 并扩展您的 jsfiddle

HTML*

<div style='height:2em;display:block;'></div>
<img id='imgarea'  src="http://www.planetinaction.com/images/gexplorer_logo48.png" draggable="true">
<textarea id='tarea' class="textzone"></textarea>
    <div id='debugger' style='top:0em;left:5em;right:0em;height:2em;width:auto;position:absolute;display:block;'>Debug Window</div>

CSS*

.targetzone {
    width: 200px;
    height: 200px;
    background-color: yellow;
}
.textzone {
    width: 200px;
    height: 200px;
    background-color: white;
}

Javascript*

(function($) {
    $.fn.dragstart = function(opt) {

        opt = $.extend({handle:"",cursor:"move"}, opt);

        if(opt.handle === "") {
            var $el = this;
        } else {
            var $el = this.find(opt.handle);
        }
        return $el.css('cursor', opt.cursor).on("mousedown", function(e) {
            if(opt.handle === "") {
                var $drag = $(this).addClass('draggable');
            } else {
                var $drag = $(this).addClass('active-handle').parent().addClass('draggable');
            }
            var z_idx = $drag.css('z-index'),
                drg_h = $drag.outerHeight(),
                drg_w = $drag.outerWidth(),
                pos_y = $drag.offset().top + drg_h - e.pageY,
                pos_x = $drag.offset().left + drg_w - e.pageX;          
        $(this).data("start_pos_x",$drag.offset().left);
        $(this).data("start_pos_y",$drag.offset().top);
        $(this).data("start_z_idx",z_idx);
            $drag.css('z-index', 1000).parents().on("mousemove", function(e) {
                $('.draggable').offset({
                    top:e.pageY + pos_y - drg_h,
                    left:e.pageX + pos_x - drg_w
                });

            }).on("mouseup", function(e) {
                    $(this).removeClass('draggable').css('z-index', z_idx);
                  $("#debugger").append(document.elementFromPoint(e.pageX,e.pageY).id + " was selected!");
            })
            e.preventDefault(); // disable selection
        }).on("mouseup", function() {
            if(opt.handle === "") {
                $(this).removeClass('draggable');
            } else {
                $(this).removeClass('active-handle').parent().removeClass('draggable');
            }
        $(this).offset({
            top: $(this).data("start_pos_y"),
            left: $(this).data("start_pos_x")
        });
    });

    }
})(jQuery);

$("img").dragstart();