0

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");
}
Improve this question
6
  • Have you checked your browser console for error reports? If not I suggest you look and include them into your question if you have any.
    – NewToJS
    Commented Oct 22, 2017 at 2:58
  • @NewToJS Not I didn't, but there was an error that returns Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. at drop (scratchat.html:30) at HTMLDivElement.ondrop (scratchat.html:50)
    – NSwanson7
    Commented Oct 22, 2017 at 2:59
  • Maybe this will help you Developer Mozilla DataTransfer/getData API
    – NewToJS
    Commented Oct 22, 2017 at 3:00
  • @NewToJS Correct me if I'm wrong, but I need to use a function for Node instead of document? If that is the case is there a similar function for Node that corresponds to document.getElementById()? Would element.getElementsByClassName() be what I'm looking for?
    – NSwanson7
    Commented Oct 22, 2017 at 3:08
  • Using getElementsByClassName() will return a group of elements, a node list so you will have to select the one you want to target. Also your draggable div and the one use to get the drop don't have ID's so you are trying to target an element with no ID at this point ev.target.appendChild(document.getElementById(data)); Unless I am reading it wrong. I would recommend you console.log(); things to ensure you are targeting and the variables contain/return the correct data.
    – NewToJS
    Commented Oct 22, 2017 at 3:19

1 Answer 1

Reset to default
1

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>

Improve this answer
4
  • Don't forget to mention the ID you have added to the paragraph element.... id="hello" otherwise just placing the draggable and ondragstart attributes to the paragraph won't work without the id adding too.
    – NewToJS
    Commented Oct 22, 2017 at 3:38
  • No problem :) It can avoid further confusion and it's a simple thing to forget.
    – NewToJS
    Commented Oct 22, 2017 at 3:48
  • @NewToJS Thank you so much for the help, I was pretty stumped. I don't have much experience with CSS or HTML so I'm just kinda learning on the "job"
    – NSwanson7
    Commented Oct 22, 2017 at 3:52
  • @user2172993 You are very welcome and we all have to start somewhere. This is Kemotoe's answer and provided the source code so the credit should be to Kemotoe.
    – NewToJS
    Commented Oct 22, 2017 at 4:00

Not the answer you're looking for? Browse other questions tagged or ask your own question.