Возникли проблемы с перетаскиванием JQuery UI в IE - PullRequest
Новая
       18

Возникли проблемы с перетаскиванием JQuery UI в IE

2 голосов
/ 23 марта 2011

Я надеялся, что кто-то может указать на мою проблему. Я пытаюсь получить эффект перетаскивания для небольшого проекта, который пытается имитировать корзину. Вот с чем я работаю: 

<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>

Это то, что я получил на своей странице index.html, которая отправляется в БД и извлекает элементы искусства, к которым также прикреплена некоторая информация о цене. 

<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);
    }
});
/* ]]> */

Проблема, с которой я сталкиваюсь, заключается в том, что в IE изображения, которые должны быть объектами, которые вы можете перетаскивать, иногда работают, а иногда нет. Есть ли что-то, что не нравится IE?

Вот мой $ .event.trigger ('init-draggable-products'); код: 

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);

Я обновился до:

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

Когда я делал, продукты или изображения не появлялись.

Ответы [ 2 ]

3 голосов
/ 23 марта 2011

Вы должны попробовать поместить этот код в инструкцию document.ready.Далее, как сказал Стив: IE9 требует jQuery UI 1.8.6 или выше. 

<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>
0 голосов
/ 23 октября 2013

В случае, если кто-то еще столкнется с проблемой перетаскивания, вам может понадобиться добавить 

 background-color: #fff;
 opacity: 0;

к элементу, который перетаскивается / щелкается, это особенность способа, которым IE обрабатывает событие перетаскивания.

...