jQuery Forum

My drop function loads an image via ajax and then changes the background color.  However, the image does not show immediately.  The image doesn't show until the mouse is moved, but oddly enough, the background color changes immediated.  Does anyone have an explanation as to why this is happening or how to fix it?

 

* ajax is orange

 

$(".item img").draggable({
   opacity: 0.7,
   helper: "clone",
   drag: function (){
    kit = $(this).attr("src");
    $(".item img").css("border-color", "#fff");
    $(this).css("border-color", "#333");
   },
             revert: false,
        });
        $("#panel").droppable({
                tolerance: 'touch',
                drop: function() {
                      //  var answer = confirm('Permantly delete this item?');
                      //  $("#panel img").attr("src", kit);
      
      flag=2;
      $.post("ajax/load-images.php", {kit_img: kit, platform_img: platform, flag_img: flag}, function(xml) {
       show = $("showcase", xml).text();
       $("#panel img").attr("src", show); // set main image
       placeholder = $("#panel img").attr("src");
          $("p.p1").html(
               $("title", xml).text()
             );
  
      });
      $(this).css('backgroundColor', '#a6bcce');
      
                },
    over: function() {
                       $(this).css('backgroundColor', '#cedae3');
                },
                out: function() {
                        $(this).css('backgroundColor', '#a6bcce');
                },

I am using a sliding image gallery and added drag and drop features to it but when I drag the clone from the image gallery to the "panel" it is stacked below everything else so it is not visible.  How can I make the image show up above everything else when I drag it?

 

I'm using a horizontal slider with jquery.carousel.min.js.

Drag & drop comes from http://www.ericbieller.com/examples/dragdrop/js/jquery-ui-1.8.2.custom.min.js

 

My draggable code is:

 var info= '';
   $(".item img").draggable({
         opacity: 0.7, 
         helper: "clone",
         drag: function (){
               info = $(this).attr("src");
         },
         revert: true
     });
     $("#panel").droppable({
           tolerance: 'touch',
           over: function() {
           $(this).css('backgroundColor', '#cedae3');
       },
            out: function() {
                  $(this).css('backgroundColor', '#a6bcce');
             },
             drop: function() {
                      //  var answer = confirm('Permantly delete this item?');
                     $("#panel img").attr("src", info);
                     $(this).css('backgroundColor', '#a6bcce');
              }
        });