Выбор и вызов оригинального css с data() и attr() работает в Firefox, но не в Opera и Chrome?

Я хочу иметь возможность восстановить перетаскиваемый div в исходное положение после перетаскивания (JQuery UI draggable()) на каком-то событии в jquery. Я сделал это:

$('#nav').draggable();

$('#nav').data({'x': $("#nav").css('left'), 'y': $("#nav").css('top')});

$("#c").click(function () {
    $('#nav').animate({'left': parseInt($("#nav").data('x')) - 15, 'top': parseInt($("#nav").data('y')) - 14}, {duration : 500});
});

и это работает даже в старых Firefox, но не в новейших Opera и Chrome. Я попытался заменить data() на attr(), и он все тот же.

Как это может быть достигнуто более кросс-браузерным способом?

редактировать: вот этот код в действии: http://jsfiddle.net/MVCA6/

Источник

2 ответа

Решение

В Chrome я видел результат с помощью

console.log($("#nav").data('x'));

Это возвращение auto;

В мозилле это дает

447px

Возможно, это может быть причиной того, что это не работает в chrome. Но если вы назначите свойство left и top в #nav в css как

left:447px;top:352px

Работает нормально. СМОТРИ ДЕМО ЗДЕСЬ

Для получения более подробной информации вы также можете получить помощь здесь

Источник

Проблема здесь в том, что jQuery UI Draggable использует top а также left свойства для перемещения элементов, в то время как вы устанавливаете положение красных полей, используя bottom а также right;

Добавление console.log($('#nav').data()) на событие клика вы увидите ваши свойства x а также y оба установлены в auto,

Чтобы решить эту проблему, вам нужно обновить CSS, чтобы расположить красное поле, используя top а также left,

Пример: http://jsfiddle.net/MVCA6/1/

В качестве примечания: Правильный отступ кода может помочь в решении проблем отладки.

Источник
Другие вопросы по тегам