Jump to content

.London Domains - £4
Photo

Drag and Drop


  • Please log in to reply
No replies to this topic

#1 mahmed1

mahmed1
  • Member
  • Newbie
  • 2 posts

Posted 22 September 2017 - 09:40

Hi All

 

This is my 1st post so apologies if i am posting incorrectly

 

I am completely new to web development -i am learning HTML, CSS and Javascript

 

I have been tasked to created a webpage front page that has some images that float about. When a user drags an image into an area (in my case another div) - i want to open up a link

 

Now so far i have managed to get the animation that shows the images floating

I have also managed to get the image to drag and drop into the div area but i am having a couple of if issues

 

1) when i drag an image, it does not fit nicely into the div area

2) the 3 images that are aligned gets floated - once i drag and drop the image - i want to be able to leave the 2 other images where they are so it doesnt move and leaves an empty space where the image has been dragged from

3) I want to be able to cancel the animation on the image that has been dragged so its not floating anymore and then open up a link (in my case a spreadsheet)

 

 

How can i achieve the above without having to learn Jquery as this is way too advanced for me at the minute

 

This is my code

<!DOCTYPE html>
<html>
<head>
    <title>"Drag and Drop"</title>
<style>
        #data{
            opacity: 0.3;
            width: 100%;
            height: 100%;
        }
        
        
#container {
            position: relative;
            width: 1900px;
            height: 950px;
            top:0px;
            left: 0px;
        }
        
        
.WipImage {
            position:absolute;
            width: 1300px;
            height: 300px;
            top:100px;
            left: 320px;
        }
        
        
.box2_container {
            position:absolute;
            width: 340px;
            height: 270px;
            top:450px;
            left: 730px;
            border: 1px solid red;
        }
        
        
#Image1 {
            width: 350px;
            height: 250px;
            top:0px;
            left: 0px;
            float: left;
            margin: 20px;
            box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
            transform: translatey(0px);
            animation-name: float;
            animation-iteration-count: infinite;
            animation-duration: 5s;
            animation-timing-function: ease-in-out;
        }
        
        
#Image2 {
            width: 350px;
            height: 250px;
            top:250px;
            left: 250px;
            float: left;
            margin: 20px;
            box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
            transform: translatey(0px);
            animation-name: float;
            animation-iteration-count: infinite;
            animation-duration: 5s;
            animation-timing-function: ease-in-out;
            animation-delay: 0.5s;
            
        
        
}
        #Image3 {
            width: 350px;
            height: 250px;
            top:250px;
            left: 250px;
            float: left;
            margin: 20px;
            box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
            transform: translatey(0px);
            animation-name: float;
            animation-iteration-count: infinite;
            animation-duration: 5s;
            animation-timing-function: ease-in-out;
        }
        
        
        
@keyframes float {
            0% {
                box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
                transform: translatey(0px);
            }
            50% {
                box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);
                transform: translatey(-20px);
            }
            100% {
                box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
                transform: translatey(0px);
            }
        }
</style>

<script type="text/javascript">

    function allowDrop(ev){
        ev.preventDefault();
    }
    function allowLeave(ev){
        ev.preventDefault();
    }

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

    function drop(ev){
        ev.preventDefault();
        var image = ev.dataTransfer.getData("content");
        ev.target.appendChild(document.getElementById(image));
        ev.target.style.background = "Red";
    }
    
</script>

</head>
<body>

        
        
<div id ="container">
                
            
<img src="data.jpeg" id="data"/>
            
            
<div class="WipImage">
                        <img src="WipImage.png" id="Image1" alt="Wip" draggable="true" ondragstart="drag(event)"/>
                        <img src="WipImage.png" id="Image2" alt="Wip" draggable="true" ondragstart="drag(event)"/>
                        <img src="WipImage.png" id="Image3" alt="Wip" draggable="true" ondragstart="drag(event)"/>
            </div>
        
            
<div class="box2_container" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="allowLeave(event)">
            
            
</div>
        </div>

</body>
</html>


  • 0




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users