Question

我已经谷歌搜索了几天，现在正在搜索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后运行时，所有内容都显示正常，但指针图像不会拖动，我得到一个＆＃34; no＆＃34;图标（斜线圈）我希望能够将指针图像拖到Image1上并将其删除。提前感谢您的任何帮助。

Answer 1

dropZoneONe
dropZoneOne

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

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

'use strict';

您可以阅读有关strict mode的更多信息。

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

Answer 2

        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（event）这是js

让拖放工作

2 个答案: