Как мне манипулировать позиционированием перетаскиваемого внутри события "out" (of droppable)? - PullRequest
Новая
       2

Как мне манипулировать позиционированием перетаскиваемого внутри события "out" (of droppable)?

0 голосов
/ 20 января 2020

У меня проблема с позиционированием с использованием перетаскиваемого интерфейса jQuery (jQuery UI v1.10.3, jQuery v1.10.2).

Я хочу перетащить элемент в буксируемый , и тогда буксируемый станет его родителем, и положение будет таким же, как у мыши позиция. Это работает. Проблема в обратном случае. Там я хочу, чтобы перетаскиваемый стал дочерним для "box_drop", а позиция должна быть такой же, как и позиция мыши в в обоих измерениях . (На стороне я делаю некоторые изменения размера, но с этим нет проблем). Настоящая проблема заключается в том, что я не могу манипулировать позиционированием перетаскиваемого объекта, если запускаю событие out. Draggable просто прыгает в верхнем правом углу, а также игнорирует сдерживание. Это можно увидеть в этом jsfiddle: https://jsfiddle.net/7ev3nkq1/10/

Основной код указан ниже.

HTML: 

<div id="experimentalbox">
  <div id="box_drop">
    <div class="droppable"></div>
  </div>
  <div id="box">
    <span class="draggable"></span>
  </div>
</div>

CSS

#experimentalbox{
  position: relative;
}

#box_drop{
  width: 100%;
  height: 61.5%;
  position: absolute;
  top: 0%;
  display: inline-block;
}

.droppable{
  width: 35%;
  height: 25%;
  position: absolute;
  bottom: 17.5%;
  left: 30%;
}

#box{
  width: 100%;
  height: 23%;
  position: absolute;
  bottom: 15.4%;    
  display: inline-block;
}

.draggable{
  width: 10%;
  height: 40%;
  top: auto;
  display: inline-block;
}

JS: 

$(".draggable").draggable({
  containment: "#experimentalbox",
});

$(".droppable").droppable({
  drop: function(event, ui){
    ui.draggable.css({
        "width": parseFloat($("#box").outerWidth() / $(this).outerWidth()) * 10 + "%",
        "height": parseFloat($("#box").outerHeight() / $(this).outerHeight()) * 40 + "%",
    });

    ui.draggable.detach().appendTo(this);
    ui.draggable.css("left", event.pageX - ui.draggable.parent().offset().left - ui.draggable.width()/2);

    var top_draggable_mitte = $(this).offset().top + $(this).outerHeight() - ui.draggable.outerHeight();
    ui.draggable.offset({top: top_draggable_mitte});
  },
  out: function(event, ui){
    ui.draggable.detach().appendTo($("#box_drop"));
    ui.draggable.css({
      "width":  parseFloat($("#box").outerWidth() / ui.draggable.parent().outerWidth()) * 10 + "%",
      "height": parseFloat($("#box").outerHeight() / ui.draggable.parent().outerHeight()) * 40 + "%",
    });

    ui.draggable.css({"left": "100%"});
  },
});

Я с нетерпением жду ваших ответов!

Заранее спасибо!

С наилучшими пожеланиями Eri c

...