CODEWITHSUNDEEP
jqueryjquery-uidrag-and-dropjquery-events
TikaL13
TikaL13

Reputation: 1488

Having a problem with jQuery UI drag and drop in IE

I was hoping someone can point out what my problem could be. I am trying to get a drag and drop effect in place for a small project which trying to mimic a shopping cart. So this is what I am working with:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

This is what I got on my index.html page which is going out to the database and retrieving the art elements which also has some price information attached to the elements.

<script type="text/javascript">
/* <![CDATA[ */
$.ajax({
    type : "GET",
    url  : "getRow.php",
    dataType: 'html',
    success: function (data) {
        $("#products").html(data);
        $.event.trigger('init-draggable-products');
    },
    error: function (xhr) {
        $('#errorDisplay').html('Error: '+ xhr.status + '' + xhr.statusText);
    }
});
/* ]]> */

The problem that I am having is in IE the images which should be objects you can drag and drop are sometimes working and sometimes not. Is there something that IE does not like?

Here is my $.event.trigger('init-draggable-products'); code:

function initializeDraggableProductImage() {
$(".products img").draggable({

    containment: 'document',
    opacity: 0.6,
    revert: 'invalid',
    helper: 'clone',
    zIndex: 100
});

$("#cabinet").droppable({

        drop:
                function(e, ui)
                {
                    $(this).removeClass('cabinetDrop');
                    $(this).addClass('ui-state-highlight');
                    $("#cabinetReset").show(); 
                    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);
                }

});
};

$(document).bind('init-draggable-products', initializeDraggableProductImage);

I had upgraded to:

https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js

When I did the products or images were not coming through.

Upvotes: 2

Views: 7609

Answers (2)

yoshyosh
yoshyosh

Reputation: 14086

In case anyone else runs into the dragging issue, you might need to add

 background-color: #fff;
 opacity: 0;

to the element that is being dragged/clicked, it's a quirk with the way IE handles the drag event.

Upvotes: 0

halfpastfour.am
halfpastfour.am

Reputation: 5923

You should try putting this code in a document.ready statement. Next to that, like Steve said: IE9 requires jQuery UI 1.8.6 or greater.

<script type="text/javascript">
$(function(){
 $.ajax({
    type : "GET",
    url  : "getRow.php",
    dataType: 'html',
    success: function (data) {
        $("#products").html(data);
        $.event.trigger('init-draggable-products');
    },
    error: function (xhr) {
        $('#errorDisplay').html('Error: '+ xhr.status + '' + xhr.statusText);
    }
 });
);
</script>

Upvotes: 3

Related Questions