Dear All,

 

 

Anyone can help me, i have iframe which i want to drag over outside of iframe & drop into a div at parent page. Anyone can help me?? Below is just a little of my skeleton code

 

 

Red area drag & drop into Blue area.

 

cart.php (inside iframe - src)

-------------------------------------------

<div class="top-container-border"></div>
  <div class="content-area">
          <div class="content drag-desired">
             
                 <?php

    $result = mssql_query("SELECT * FROM internet_shop where category='".$category."'");
    while($row=mssql_fetch_assoc($result))
    {
     echo '<div class="product"><img src="img/products/'.$row['img'].'" alt="'.htmlspecialchars($row['name']).'" width="128" height="128" class="pngfix" /></div>';
    }

    ?>
               

               
          <div class="clear"></div>
  
   </div>
   </div>
 <div class="bottom-container-border"></div>

 

 

 

 

demo.php

--------------

<span class="top-label">
            <span class="label-txt"><a href="cart.php?category=<?=$row1['category']?>" target="ifcurrrate"><?=$row1['category']?></a></span>
        </span>

 
 <?php
 $i=$i+1;
 }
 ?>
 <iframe name="ifcurrrate" src="cart.php?category=<?=$category?>" frameborder="0" width="100%" height="500px" marginheight="0px" scrolling="no"></iframe>
     
 
 <div class="container">
   
     <span class="top-label">
            <span class="label-txt">Shopping Cart</span>
        </span>
        <div class="top-container-border">
        </div>
        <div class="content-area">
   
      <div class="content drop-here">
             <div id="cart-icon">
              <img src="img/Shoppingcart_128x128.png" alt="shopping cart" class="pngfix" width="128" height="128" />
     <img src="img/ajax_load_2.gif" alt="loading.." id="ajax-loader" width="16" height="16" />
                </div>

    <form name="checkoutForm" method="post" action="order.php">
               
                <div id="item-list">
                </div>
               
    </form>               
                <div class="clear"></div>

    <div id="total"></div>

                <div class="clear"></div>
               
                <a href="" onclick="document.forms.checkoutForm.submit(); return false;" class="button">Checkout</a>
               
          </div>

        </div>
       
        <div class="bottom-container-border">
        </div>

 

 

 

Script.js

------------

var purchased=new Array();
var totalprice=0;

$(document).ready(function(){
 
 $('.product').simpletip({
  
  offset:[40,0],
  content:'<img src="img/ajax_load.gif" alt="loading" style="margin:10px;" />',
  onShow: function(){
   
   var param = this.getParent().find('img').attr('src');
   
   if($.browser.msie && $.browser.version=='6.0')
   {
    param = this.getParent().find('img').attr('style').match(/src=\"([^\"]+)\"/);
    param = param[1];
   }
   
   this.load('ajax/tips.php',{img:param});
  }

 });
 
 $(".product img").draggable({
 
 containment: 'document',
 opacity: 0.6,
 revert: 'invalid',
 helper: 'clone',
 zIndex: 100
 
 });

 $("div.content.drop-here").droppable({
 
   drop:
     function(e, ui)
     {
      var param = $(ui.draggable).attr('src');
      
      if($.browser.msie && $.browser.version=='6.0')
      {
       param = $(ui.draggable).attr('style').match(/src=\"([^\"]+)\"/);
       param = param[1];
      }

      addlist(param);
     }
 
 });

});

 

 

Please advise.

 

Thank you.

 

Regards,

Micheale