Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New Coder
    Join Date
    May 2011
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Drag and drop not working when receive from ajax.

    Dear All,
    I have two pages with the similar codes. One is here http://183.78.169.53/tm/addTyreSwap1.php in this page you have select the vehicle via the drop down list then a number of tyre will appear via the ajax call. The problem is that both the draggable and droppable is attached to it but is not working. On the other hand I have another page http://183.78.169.53/tm/getTyreLayoutDetails1.php?l=3 here which directly generate the tyre layout and both drag n drop works perfects fine. Both are using the same codes. Only one is via ajax. Any idea why it fails in ajax?

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,791
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Put your Drag and Drop into a function. Fire the function after the ajax call is a success.

    The issue is that your drag and drop fires at ready. The item you want to be dragged/dropped doesn't exist. So like using "live" you need to refire the drag drop to target the specific item that has been added.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    New Coder
    Join Date
    May 2011
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Dear Harbinger,
    I am using the jquery library. So must I move all the library into my local codes is it? This is because the drag and drop is not my own function.

  • #4
    New Coder
    Join Date
    May 2011
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Dear Harbinger,
    Any idea how to assign the live I have tried to look around mostly say must have click or change but in my case how to assign the live? Thank you.

  • #5
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,791
    Thanks
    8
    Thanked 131 Times in 129 Posts
    here's a pretty simple version, it uses jQuerys ajax.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>newbie14 :: drag/drop</title>
    
    <style type="text/css">
    #dragBox {
    border: 2px solid #000;
    height: 500px;
    width: 500px;
    margin-top: 20px;
    padding: 6px;
    }
    
    #dragBox div {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border: 1px solid #000;
    }
    </style>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    	$('.draggable').draggable();
    	
    	// ajax stuff
    	$("select#a1").change(function(){
    		var data = $(this).val();
    		var randomColor = Math.floor(Math.random()*16777215).toString(16);
    		$.ajax({
    			type: "POST",
    			data: "car=" + data,
    			success: function(){
    				$('#dragBox').append('<div style="background: #'+randomColor+'" class="draggable new'+data+'">'+data+'</div>');
    				$('.new'+data).draggable();
    			}
    		});		
    	});
    });
    </script>
    </head>
    <body>
    
    <select id="a1" name="a1">
    	<option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
    </select>
    
    <div id="dragBox">
    <div style="background: #9ee" class="draggable">A</div>
    <div style="background: #6c3;" class="draggable">B</div>
    </div>
    
    </body>
    </html>
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #6
    New Coder
    Join Date
    May 2011
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Dear Harbinger,
    The problem my output from the ajax varies. There will lots of this sort of output.So how cater for this complexity.

    Code:
    echo "<div class='t1'>";		 	 	
    		     echo "<span class='droppable'>";
    		            echo "<b>".$loPosition."</b>";
    	            	echo "<img class='draggable' src='tyreImages/tyre2.png' >";
    	       echo "</span>";         
    	       echo "<span class='mid'>";
    	        if($axleExist==1)
    			    {
    			     echo "<img src='tyreImages/longJoinAxle.png'>";
    			    }
    			    else
    			    {
    			    	echo "<img src='tyreImages/longJoin1.png'>";
    			    }
    	       echo "</span>";
    	       echo "<span class='droppable'>";
    	       				echo "<b>".$loPosition."</b>";
    	       				echo "<img class='draggable' src='tyreImages/tyre2.png' >";
    	       echo "</span>";
    	    echo "</div>";

  • #7
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,791
    Thanks
    8
    Thanked 131 Times in 129 Posts
    not really that complex you just need an ajax call to grab a lot more info. another simplified example:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>newbie14 :: drag/drop</title>
    
    <style type="text/css">
    #dragBox {
    border: 2px solid #000;
    height: 500px;
    width: 500px;
    margin-top: 20px;
    padding: 6px;
    }
    
    .t1 span {
    float: left;
    border: 1px solid #ccc;
    padding: 5px;
    }
    
    .t1 span.droppable {
    padding: 8px 5px;
    background: #de3;
    }
    </style>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {	
    	$("select#a1").change(function(){
    		var data = $(this).val();
    		$.post('req.php', {name: $('#a1').val()}, function(data){
    			$('#dragBox').html(data);
    			$('.t1 span.droppable').each(function(){
    				$(this).draggable();
    			});
    		});	
    	});
    });
    
    
    </script>
    </head>
    <body>
    
    
    <select id="a1" name="a1">
    	<option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
    </select>
    
    <div id="dragBox">
    </div>
    
    </body>
    </html>
    req.php

    Code:
    <?php
    echo "<div class='t1'>";		 	 	
    echo "<span class='droppable'>";
    echo "<b>".$_POST['name']."</b>";
    echo "</span>";         
    echo "<span class='mid'>";
    if($axleExist==1){
    	echo "longJoinAxle.png";
    } else {
    	echo "longJoin1.png";
    }
    echo "</span>";
    echo "<span class='droppable'>";
    echo "<b>".$_POST['name']."</b>";
    echo "</span>";
    echo "</div>";	
    ?>
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #8
    New Coder
    Join Date
    May 2011
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Dear Harbinger,
    I was trying another method as like this. Why is not working either ya?

    Code:
    $('img.draggable').live('mouseover', function()
      {
      //	alert('Mouse Over');
      $('.draggables').draggable();
      $('.droppables').droppable();
      });

  • #9
    New Coder
    Join Date
    May 2011
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Dear Harbinger,
    I have implemented your sample it works great for the ajax. I got one problem. IF you see below is my snippet for generating the ajax results.
    For the draggable I did this is not working. I just slight tweaking rite to making work pefectly fine. I tried just .t1 img.draggable but is not working as per what I want too.

    Code:
    $('.t1 span.img.draggable').each(function(){
    				$(this).draggable();
    			});

    Code:
    echo "<span class='droppable'>";
    		            echo "<b>".$loPosition."</b>";
    	            	echo "<img class='draggable' src='tyreImages/tyre2.png' >";
    	       echo "</span>";

  • #10
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,791
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Code:
    $('.t1 span.img.draggable')
    is not the same as

    Code:
    $('.t1 span img.draggable')
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #11
    New Coder
    Join Date
    May 2011
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Dear Harbinger,
    I have put in this method now but it looses the original functionality. The original one suppose to be in this link http://183.78.169.53/tm/getTyreLayoutDetails1.php?l=3. My new implementation based on your idea is in this link http://183.78.169.53/tm/addTyreSwap2.php. Just select one vehicl from the drop down list. You will notice even the labels on the tyre images goes missing.

    Code:
    $('.t1 span img.draggable').each(function(){
    				$(this).draggable();
    			});

  • #12
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,791
    Thanks
    8
    Thanked 131 Times in 129 Posts
    the labels are there add a z-index to them

    Code:
    tyres b {
        z-index: 1;
    }
    and you'll see them
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #13
    New Coder
    Join Date
    May 2011
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Dear Harbinger,
    Ok that I have overcome now the problem if you compare both my links http://183.78.169.53/tm/getTyreLayoutDetails1.php?l=3 and http://183.78.169.53/tm/addTyreSwap2.php. You will notice in the first link it can only drag and drop to another tyre image but my second can drop freely anywhere it likes and the images gets disapper from its original location.

  • #14
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,791
    Thanks
    8
    Thanked 131 Times in 129 Posts
    your .t1 has overflow: hidden that's why they dissappear.

    As for being able to freely drop the images, that I assume, is the droppable() part.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #15
    New Coder
    Join Date
    May 2011
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Dear Harbinger,
    I have remove that overflow: hidden and what changes need to be done for the droppable then? I am surprise why my original one works perfectly fine ?


  •  

    Posting Permissions

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