Проблема с JQuery Animate с Draggable Item

У меня есть сценарий jquery для обмена местами перетаскиваемых элементов, но по какой-то причине эффект анимации вызывает визуальные проблемы во время обмена. Скрипт представляет собой вариант jsfiddle для кода, который я внес в несколько изменений, чтобы соответствовать моим потребностям. Я создал jsfiddle, чтобы показать проблему, в настоящее время я обнаружил проблему, возникающую из функции swap, и прокомментировал строку, которая работает, но не анимирует. Если кто-то может помочь мне с тем, чтобы своп был правильно анимирован, я был бы очень признателен. Вы можете просмотреть jsfiddle здесь: http://jsfiddle.net/AywmJ/161/Проблема с JQuery Animate с Draggable Item

Это функция, что вопрос происходящая из (я считаю):

function swap($el, fromPos, toPos, duration, callback) { 
      $el.animate({fromPos, toPos}, duration, callback || $.noop); 
      //(callback || $.noop)(); 
     }

источник

2016-05-31 Tyharo

Я обновил свой jquery вместе со ссылкой jsfiddle, но я все еще сталкиваюсь с той же проблемой. – Tyharo

Можете ли вы подробно рассказать о «визуальных проблемах во время свопа» _ в отношении того, какие визуальные проблемы являются причиной свопа? –

При перестановке позиций элементов перетаскиваемый штифт будет анимироваться из неправильного направления, чтобы занять свое место во время обмена. Если вы заглядываете в jsfiddle и пытаетесь перетащить булавку на другой контакт, вы можете увидеть проблему во время обмена. – Tyharo

Я не знаком с JQuery-анимацией, но я нашел несколько вещи, чтобы исправить своп.

При перетаскивании заполнителя («DIV тег с перетаскиваемом классом») его добавляющие свойства SYLE style="position: relative; z-index: auto; left: 151px; top: 22px;" с left: 151px; top: 22px, то есть, как далеко заполнитель переместилась с текущей позиции с левыми и верхними атрибутами.

В текущем коде вы swapping .draggable placeholders, поэтому вы видите, что необычное поведение

Вместо поменять содержание .draggable

<div class="pinChildContainer droppable"> 
     <div class="pins draggable"> 
      <img class="pinImage" src="img/paymentServices.jpg" alt="Payment Services" width="188" height="185" /> 
      <p class="pinTitle">Payment Services</p> 
     </div> 
</div>

Переключаю (теперь поменять .pins)

<div class="pinChildContainer droppable"> 
     <div class="draggable"> 
      <div class="pins"> 
        <img class="pinImage" src="img/paymentServices.jpg" alt="Payment Services" width="188" height="185" /> 
        <p class="pinTitle">Payment Services</p> 
      </div> 
     </div> 
</div>

Укажите код для замены .pins

var dragged = $(ui.draggable); 
var fromContainer = dragged.parent(); 
var toContainer = $(this); 
var displaced = $(this).find('.pins'); 

// added class .from and .to classes to identify the placeholders 
var fromPinContainer = dragged.find('.pins').removeClass('from to'); 
fromPinContainer.addClass("from"); 

displaced.removeClass('from to'); 
displaced.addClass("to"); 

if (fromContainer.is(toContainer)) { 
    dragged.animate({ left: 0, top: 0 }); 
} 

dragged.animate({ top: 0, left: 0 }); 
displaced.animate({ bottom: 0, left: 0 }, finalize); 

function finalize() { 
    fromContainer.find('.draggable').append(toContainer.find('.to')); 
    toContainer.find('.draggable').append(dragged.find('.from')); 
} 

finalize();

JSFiddle

Я предполагаю, что это не полированный код, но это дает эффект того, что вы ищете.

источник

2016-06-09 19:47:55

Большое спасибо Павану, я очень благодарен! – Tyharo

Проблема с JQuery Animate с Draggable Item

ответ

Смежные вопросы