Question

            <script type="text/javascript" src="jquery-2.0.3.min.js"></script>
            <style>
            .canvas {
                position:relative;
                height:550px;
                width:400px;
                background:Yellow url("http://www.mapstop.co.uk/images/uploaded/lrg_wg2668.6a40d0d.jpg") no-repeat;
            }
            .canvas img {
                position:absolute;
            }
            </style>
            <div class="toolbar">
            <span>Drag...</span>
            <img src="http://cdn4.iconfinder.com/data/icons/iconsland-weather/PNG/48x48/Sunny.png" alt="" title="" />
            <img src="http://cdn4.iconfinder.com/data/icons/iconsland-weather/PNG/48x48/Thermometer_Snowflake.png" alt="" title="" />
            <img src="http://cdn4.iconfinder.com/data/icons/iconsland-weather/PNG/48x48/Overcast.png" alt="" title="" />
            <img src="http://cdn4.iconfinder.com/data/icons/iconsland-weather/PNG/48x48/Night_Rain.png" alt="" title="" />
            </div>
            <div class="canvas"></div>
            <script type="text/javascript">
            $(document).ready(function () {
                var $toolbar = $(".toolbar");
                var $tools = $toolbar.find("img");

                //define drag and drop handlers
                $toolbar.on("dragstart", "img", onDrag);

                $(".canvas").on({
                    dragenter: false,
                    dragover: false,
                    drop: onDrop
                });

                //handle commencement of drag
                function onDrag(e) {

                    console.log("onDrag");
                }

                //handle drop
                function onDrop(e) {

                    //console.log("OnDrop");
                    //console.log(e.clientX);
                    //console.log(e.clientY);
                    //console.log(e.originalEvent);
                }
            });
            </script>

当我删除图像时，由于某种原因我转发到http://cdn4.iconfinder.com/data/icons/iconsland-weather/PNG/48x48/Sunny.png，但仅限于FireFox。 Chrome和IE似乎都采取了预期的行为，即现在什么都不做。也许有人可能知道为什么会这样？

Answer 1

尝试指定用于拖动输入和拖动的处理程序，并将e.preventDefault();和e.stopPropagation();添加到处理程序。

onDrop事件转发到url但仅限于FireFox

1 个答案: