使用 Dragstart PreventDefault 禁用浏览器默认图像拖动,但它也禁用我的拖动事件

发布于 2024-12-24 02:51:02 字数 1504 浏览 1 评论 0原文

我尝试阻止浏览器默认图像在dragstart中拖动,但不知何故它也禁用了drag和dragend事件。无论如何,我可以禁用浏览器默认图像拖动,但它仍然会运行拖动和拖动结束事件?

或者唯一的选择是使用背景图像?我不想这样做,因为我需要因此更改很多代码。现在我知道为什么每个人都使用背景图像了。

$("#addObjectBarContainer a img")
        .bind("dragstart", function(event){
            var tmpObjImg = $("<img></img>");
            tmpObjImg
                .attr({
                    id: "temp-img-object-drag"
                ,   src: $(this).attr("src")
                })
                .css({
                    position:"absolute"
                });

            tmpObjImg.appendTo("body");
            event.preventDefault();
        })
        .bind("drag" , function(event){
            $("#temp-img-object-drag").css({
                top: event.pageY,
                left: event.pageX
           });
        })
        .bind("dragend",function(event){
            var ObjectTop = event.pageY - $("#canvas").offset().top;
            var ObjectLeft = event.pageX -$("#canvas").offset().left
            $("#temp-img-object-drag").remove();
            $(this).parent().trigger("click");

            $(activeObject).css({
                top: ObjectTop,
                left: ObjectLeft
            });
            $(activeObject,"div:first-child").css({
                top: ObjectTop,
                left: ObjectLeft
            });

            dragresize.elmY = ObjectTop;
            dragresize.elmX = ObjectLeft;

            inspector_Update(activeObject, "select");
        });

I try to prevent the browser default image drag in dragstart, but somehow it disable the drag and dragend event also. Anyway i can disable the browser default image drag , but it will still run the drag and drag end event?

Or the only option for be is to use background image? I dont want to do this because I need to change a lot of code because of this. Now I know why everyone using background-image.

$("#addObjectBarContainer a img")
        .bind("dragstart", function(event){
            var tmpObjImg = $("<img></img>");
            tmpObjImg
                .attr({
                    id: "temp-img-object-drag"
                ,   src: $(this).attr("src")
                })
                .css({
                    position:"absolute"
                });

            tmpObjImg.appendTo("body");
            event.preventDefault();
        })
        .bind("drag" , function(event){
            $("#temp-img-object-drag").css({
                top: event.pageY,
                left: event.pageX
           });
        })
        .bind("dragend",function(event){
            var ObjectTop = event.pageY - $("#canvas").offset().top;
            var ObjectLeft = event.pageX -$("#canvas").offset().left
            $("#temp-img-object-drag").remove();
            $(this).parent().trigger("click");

            $(activeObject).css({
                top: ObjectTop,
                left: ObjectLeft
            });
            $(activeObject,"div:first-child").css({
                top: ObjectTop,
                left: ObjectLeft
            });

            dragresize.elmY = ObjectTop;
            dragresize.elmX = ObjectLeft;

            inspector_Update(activeObject, "select");
        });

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

挖鼻大婶 2024-12-31 02:51:02

现在,您可以在 Dragstart 事件侦听器中使用 event.dataTransfer.clearData() 来禁用默认行为,但仍执行所需的侦听器。

Nowadays you can use event.dataTransfer.clearData() in the dragstart eventlistener to disable the default behaviour but still execute your desired listener.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文