Невозможно расположить элементы во время обмена внутри модального всплывающего окна

У меня есть два перетаскиваемых div внутри модального всплывающего окна, когда я перетаскиваю, позиции divs спускаются во время периода анимации. Я не могу разобраться в нем ,Невозможно расположить элементы во время обмена внутри модального всплывающего окна

HTML

<title> 
    Swapping of tiles with Animation</title> 

<body> 
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 

    <!-- Modal --> 
    <div id="myModal" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 

     <!-- Modal content--> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title">Modal Header</h4> 
     </div> 
     <div class="modal-body"> 
      <p>Some text in the modal.</p> 
      <div class='droppable'> 
      <div class="draggable">Draggable 1</div> 
      </div> 
      <div class='droppable'> 
      <div class="draggable">Draggable 2</div> 
      </div> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
     </div> 

    </div> 
    </div>

JavaScript

$(document).ready(function() { 
    window.startPos = window.endPos = {}; 

    makeDraggable(); 

    $('.droppable').droppable({ 
    hoverClass: 'hoverClass', 
    drop: function(event, ui) { 
     var $from = $(ui.draggable), 
     $fromParent = $from.parent(), 
     $to = $(this).children(), 
     $toParent = $(this); 

     window.endPos = $to.offset(); 

     swap($from, $from.offset(), window.endPos, 200); 
     swap($to, window.endPos, window.startPos, 1000, function() { 
     $toParent.html($from.css({ 
      position: 'relative', 
      left: '', 
      top: '', 
      'z-index': '' 
     })); 
     $fromParent.html($to.css({ 
      position: 'relative', 
      left: '', 
      top: '', 
      'z-index': '' 
     })); 
     makeDraggable(); 
     }); 
    } 
    }); 

    function makeDraggable() { 
    $('.draggable').draggable({ 
     zIndex: 99999, 
     revert: 'invalid', 
     start: function(event, ui) { 
     window.startPos = $(this).offset(); 
     } 
    }); 
    } 

    function swap($el, fromPos, toPos, duration, callback) { 
    $el.css('position', 'absolute') 
     .css(fromPos) 
     .animate(toPos, duration, function() { 
     if (callback) callback(); 
     }); 
    } 
});

Fiddle Here

источник

2016-08-31 Raviteja

Вы должны использовать .position() вместо .offset() когда вы изменили значение элемента position к absolute и вы хотите разместить его в том же месте.

Так как вы изменить элемент position к absolute, вы имеете дело с positioned element (то есть, «элемент которого вычисленного положение объект является либо relative, absolute, fixed или sticky»). Когда вы устанавливаете свойство css top позиционируемого элемента, вы указываете «расстояние между краем верхнего края элемента и верхним краем его содержащего блока» (а не верхним краем документа). Содержащий блок является ближайшим предком, который также является позиционируемым элементом. JQuery относится к содержащему блоку как offset parent.

В то время как функция .offset() получает координаты элемента «относительно документа», функция .position() получает координаты «относительно родителя смещения».

Роль смещения для элемента, который вы анимируете, является элементом класса «модальное тело». (Это ближайший предок, который является позиционируемым элементом. Он имеет значение positionrelative.) Вам действительно не нужно определять родителя смещения, поскольку функция .position() определит это для вас.

jsfiddle

Этот jsfiddle идентичен оригиналу, за исключением того, каждый вызов .offset() был заменен вызовом .position().

источник

2016-09-07 15:54:48

Его работа отлично, я тоже проверил браузер IE11 –

Немного визуального улучшения, по крайней мере для Chrome и FF, можно было добавить свойство 'cursor: grab' и' cursor: grabbing', чтобы пользователь знал, что это перетаскиваемый элемент. [** demo **] (http://jsfiddle.net/rickyruizm/6yb35pc2/) – Ricky

@John S Спасибо и извините за очень поздний ответ – Raviteja

Изменение положения от абсолютного к фиксированному.

function swap($el, fromPos, toPos, duration, callback) { 
    $el.css('position', 'fixed') 
    .css(fromPos) 
    .animate(toPos, duration, function() { 
    if (callback) callback(); 
    }); 
}

источник

2016-09-01 12:06:50 Ish

Тем не менее, не меняя местами идеально. – Raviteja

Не уверен, является ли то, что вы ищете или нет, но это вариант (хотя Hacky один).

Я попытался понять основную причину проблемы, но не мог этого сделать, поэтому думал о хакерском решении проблемы. смените свою функцию на обмен.

function swap($el, fromPos, toPos, duration, callback) { 

$el.css('position', 'fixed') 
    .css(fromPos) 
    .css('margin-top','-10px') 
    .animate(toPos, duration, function() { 
    if (callback) callback();  
    $el.css('margin-top','0px'); 
    });

}

Еще одно предложение, увеличить продолжительность анимации в первой фазе. что-то вроде этого swap($from, $from.offset(), window.endPos, 1000);

источник

2016-09-07 12:44:38

Невозможно расположить элементы во время обмена внутри модального всплывающего окна

ответ

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