All geek questions in one place

Unable to place items while sharing inside modal popup

I have two draggable divs inside a modal popup, when I drag, the divs positions descend during the animation period. I can’t figure it out.

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

Script here

+4
source share
3 answers

You should use .position()instead .offset()when you change the value of an positionelement to absolute, and you want to put it in the same place.

position absolute, (.. ", position relative, absolute, fixed sticky" ). top , " " ( ). , . JQuery .

.offset() " ", .position() " ".

, , " ". ( , . position relative.) , , .position() .

jsfiddle

jsfiddle , , .offset() .position().

+5

.

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

, , , ( ).

, , . .

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

0

Source: https://habr.com/ru/post/1653126/

More articles:


All Articles