让拖放开始工作

Getting Drag and Drop to work

本文关键字：工作 开始 拖放      更新时间：2023-09-26

我已经在谷歌上搜索了好几天了，现在正在搜索具有拖放功能的javascript；在我的页面上删除功能。它们都有相同的结果——项目不会拖动。以下是我当前正在尝试的当前代码。

        <%@ Page Title="" Language="VB" MasterPageFile="~/Coder2CoderMaster2.master" AutoEventWireup="false" CodeFile="TESTONLY.aspx.vb" Inherits="TESTONLY" %>
<asp:Content ID="Content4" runat="server" contentplaceholderid="head">
<link rel="shortcut icon" href="/Images/favicon2.ico" type="image/x-icon" />
<link rel="icon" href="/Images/favicon2.ico" type="image/x-icon" />
    <link href="Styles/Site.css" rel="stylesheet" type="text/css" />
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="phBody">
 <div class="target">
    <asp:Image ID="pointer1" draggable="true" runat="server" ImageUrl="/images/pointer1.png" />
    <asp:Image ID="pointer2" draggable="true" runat="server" ImageUrl="/images/pointer2.png" />
 </div>
<br />
 <div id="drop_target-one">
     <asp:Image ID="Image1" runat="server" ImageUrl="/images/1/1_20151019114033223_1.tif" />
</div>
 <script type="text/javascript">
     var dropZoneOne = document.querySelector('#drop-target-one');
     var dragElements = document.getElementsByClassName("target")[0];
     var elementDragged = null;
     for (var i = 0; i < dragElements.length; i++) {
         dragElements[i].addEventListener('dragstart', function (e) {
             e.dataTransfer.effectAllowed = 'move';
             elementDragged = this;
         });
         dragElements[i].addEventListener('dragend', function (e) {
             elementDragged = null;
         });
     };
     dropZoneOne.addEventListener('dragover', function(e) {
        if (e.prevenDefault) {
            e.preventDefault();
        }
        e.dataTransfer.dropEffect = 'move'
        return false:
    });
    dropZoneONe.addEventListener('dragenter', function(e) {
        this.className = "over"
    });
    dropZoneONe.addEventListener('dragleave', function(e) {
        this.className = "";
    });
    dropZoneOne.addEventListener('drop', function(e) {
        if (e.preventDefault) e.preventDefault();
        if (e.stopPropagation) e.stopPropagation();
        this.className=""
        document.querySelector('#drag-elements').removeChild(elementDragged);
        return false;
    });
 </script>
 </asp:Content>

当我上传到GoDaddy后运行此程序时，所有内容都显示正常，但指针图像不会拖动，我会得到一个"否"图标（斜线圆圈）我希望能够将指针图像拖到Image1上并将其放下。提前感谢您的帮助。

dropZoneONe
dropZoneOne

你真的应该学会使用浏览器的开发工具来捕捉这样的错误。

此外，脚本解释器可能会忽略一些可能导致问题的东西。您应该在脚本的顶部添加这一行。

'use strict';

你可以阅读更多关于严格模式的内容。

快速检查代码表明'dragenter'事件处理程序中缺少event.preventDefault()

        function allowDrop(ev) {
    ev.preventDefault();
}
function drag(ev) {
    ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev) {
    var data = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
    ev.preventDefault();
}

试着用这个。只是简单的拖放。还要确保对于要拖动的id，执行draggable=true和ondragstart=drop（事件），这是js

相关文章：