拖放API无效

Question

I'm working on a group project for my software engineering course. 我正在为我的软件工程课程进行小组项目。 To make a long story short I'm trying to use the drag and drop HTML API, but I'm not having any luck. 长话短说，我尝试使用拖放式HTML API，但是我没有任何运气。 Below is the html for the page I'm trying to implement the drag and drop on. 以下是我要实现拖放的页面的html。 There are multiple files within the project as this is a website, if there isn't enough information I will upload the other files at the request. 该项目内有多个文件，因为这是一个网站，如果没有足够的信息，我将根据要求上传其他文件。 In the HTML file below all I'm trying to do is drop hello <p> into the div1 <div> . 在下面的HTML文件中，我要做的只是将hello <p>放到div1 <div> 。

<!DOCTYPE html>
<html>
    <head>
        <title>Fundamentals of SE (Scratchat)</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
        <!-- jQuery cdn -->
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"   integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="   crossorigin="anonymous"></script>
        <link rel="stylesheet" href="css/main.css">
        <script>
            function openNav() {
                document.getElementById("mySidenav").style.width = "250px";
                document.getElementById("main").style.marginLeft = "250px";
            }

            function closeNav() {
                document.getElementById("mySidenav").style.width = "0";
                document.getElementById("main").style.marginLeft= "0";
            }
            function allowDrop(ev) {
                ev.preventDefault();
            }

            function drag(ev) {
                ev.dataTransfer.setData("text", ev.target.id);
            }

            function drop(ev) {
                ev.preventDefault();
                var data = ev.dataTransfer.getData("text");
                ev.target.appendChild(document.getElementById(data));
            }
        </script>
    </head>
    <body>

        <div id="mySidenav" class="sidenav">
            <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
            <a href="index.html">Home</a>
            <a href="aboutus.html">About us</a>
            <a href="features.html">Features</a>
            <a href="#">Build</a>
            <a href="tutorial.html">Tutorial</a>
            <a href="https://scratch.mit.edu/about">About Scratch</a>
        </div>

        <div id="main">
            <span style="font-size:30px;cursor:pointer; color: #white" onclick="openNav()">&#9776;</span>
        </div>

        <div class="div1" style="height: 100px; width: 100%; border: solid 2px black" draggable="true" ondrop="drop(event)" ondragover="allowDrop(event)">

        </div>

<!--
        <div class="container">
            <div class="jumbotron" ondrop="drop(event)" ondragover="allowDrop(event)">
                <div id="scratchWindow" style="padding-top: 200px; padding-bottom: 200px;">

                </div>
            </div>
        </div>
-->

        <div class="question" draggable="true" ondragstart="drag(event)">
            <p>
                Hello
<!--            
                <label>What Question Do You Want Your Bot To Ask?</label><br>
                <textarea
                    id = "Question"
                    rows = 3
                    cols = 20>Your Question Here</textarea>
-->
            </p>
        </div>
    </body>
</html>

HERE IS THE CSS FILE USED GLOBALLY ACROSS THE WEBSITE: 以下是网站上全球使用的CSS文件：

.jumbotron {
    background-image: url("../res/robot-customer-service.png");
    background-position: 0% 25%;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin-top: 20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

img {
    max-width: 100%;
    max-height: 100%;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background: white;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #1974fc;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #36bac3;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

#main {
    transition: margin-left .5s;
    padding: 16px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

body {

    background: url("https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2015/04/colortheory.jpg");
}

Answer 1

The problem is you are grabbing the whole div instead of just the text . 问题是您正在抓整个div而不仅仅是text 。

Give your paragraph - <p> element an id and add your draggable & ondragstart attributes to it. 给您的段落- <p>元素指定一个id并ondragstart添加draggable和ondragstart属性。

 function openNav() { document.getElementById("mySidenav").style.width = "250px"; document.getElementById("main").style.marginLeft = "250px"; } function closeNav() { document.getElementById("mySidenav").style.width = "0"; document.getElementById("main").style.marginLeft = "0"; } 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)); }

 <div class="div1" style="height: 100px; width: 100%; border: solid 2px black" draggable="true" ondrop="drop(event)" ondragover="allowDrop(event)"> </div> <div class="question"> <p id="hello" draggable="true" ondragstart="drag(event)"> Hello </p> </div>

拖放API无效

问题描述

1 个解决方案

解决方案1
1 2017-10-22 03:30:59

拖放API无效

问题描述

1 个解决方案

解决方案1 1 2017-10-22 03:30:59

解决方案1
1 2017-10-22 03:30:59