CODEWITHSUNDEEP
javascripthtmlcssdrag-and-dropdraggable
NSwanson7
NSwanson7

Reputation: 173

Drag and drop API not working

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. Below is the html for the page I'm trying to implement the drag and drop on. 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>. 

<!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:

.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");
}

Upvotes: 0

Views: 1325

Answers (1)

kemotoe
kemotoe

Reputation: 1777

The problem is you are grabbing the whole div instead of just the text.

Give your paragraph - <p> element an id and add your draggable & ondragstart attributes to it.

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>

Upvotes: 1

Related Questions