0

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

我尝试了处理 ondragenter 和 ondragover 事件的各种组合，但是当图像被拖动到​​文本区域上时，无法显示“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/

4

1 回答 1

1

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

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

简而言之 - 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();
于 2013-07-11T05:39:45.300 回答