SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Mar 2014
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post Html5 Drag And Dropjavascript Problem

    I am basically trying to create a drag and drop. and i came up with this

    HTML Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <style>
    #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
    #div2 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
    #my1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
    #my2 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
    </style>
    <script>
    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="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    
    
    
    <div id="my1" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img id="drag1" src="http://www.sitepoint.com/forums/images/styles/TheBeaconLight/style_blue/sitepoint.svg" draggable="true"
    ondragstart="drag(event)" width="336" height="69">
    </div>
    
    <br>
    
    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    
    <div id="my2" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img id="drag2" src="http://www.sitepoint.com/forums/images/styles/TheBeaconLight/style_blue/sitepoint.svg" draggable="true"
    ondragstart="drag(event)" width="336" height="69">
    </div>
    </body>
    </html>

    it is currently allowing user to put 2 images in 1 div. what i want is this if the user already drag the image in the div then div will not allow the user to insert another image in it..One image in one div at a time will be a better script... Please help i am new to javascript

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Welcome to the forums

    Was there a question in there?

  3. #3
    SitePoint Member
    Join Date
    Mar 2014
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it is currently allowing user to put 2 images in 1 div. what i want is this if the user already drag the image in the div then div will not allow the user to insert another image in it..One image in one div at a time will be a better script

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    This functionality is available in numerous plugins.
    In light of the fact that you said you were new to JavaScript (in your previous post before editing it) is there any reason you are trying to program it yourself ?

  5. #5
    SitePoint Member
    Join Date
    Mar 2014
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i searched for many drag and drop plugins but didn't find the exact functionality in any . thanks for you quick response

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Ok, what is the functionality you are looking for?

  7. #7
    SitePoint Member
    Join Date
    Mar 2014
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i am using drag and drop script here . In this user can drag a image into div box . right now user can put two images in the div box i want to lock the div box so user can't insert more then 1 image in the box

  8. #8
    SitePoint Member
    Join Date
    Mar 2014
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just came up with solution thanks
    HTML Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <style>
    #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
    #div2 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
    #div3 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
    </style>
    <script>
    function allowDrop(ev)
    {
    ev.preventDefault();
    }
    
    function drag(ev)
    {
    ev.dataTransfer.setData("Text",ev.target.id);
    }
    
    
    	function drop(ev) {
    		ev.preventDefault();
    		if(ev.currentTarget.innerHTML == "") {
    	var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
    		}
    	}
    </script>
    </head>
    <body>
    
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    
    <br>
    
    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    
    <br>
    
    <div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    
    <img id="drag1" src="http://www.w3schools.com/html/img_w3slogo.gif" draggable="true"
    ondragstart="drag(event)" width="336" height="69">
    
    <img id="drag2" src="http://www.w3schools.com/html/img_w3slogo.gif" draggable="true"
    ondragstart="drag(event)" width="336" height="69">
    
    <img id="drag3" src="http://www.w3schools.com/html/img_w3slogo.gif" draggable="true"
    ondragstart="drag(event)" width="336" height="69">
    
    </body>
    </html>
    Attached Images Attached Images


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •