Создание изменяемого размера значка прилипает к нижней части динамического размера div - PullRequest
Новая
       4

Создание изменяемого размера значка прилипает к нижней части динамического размера div

0 голосов
/ 27 ноября 2018

Я пытаюсь работать над div с информацией о наведении курсора мыши.

Элемент div, в который он заполняется, может быть изменяемого размера и перетаскиваемого, и это прекрасно работает.Моя небольшая проблема заключается в том, что иконка изменяемого размера остается на своем месте, когда коробка сгибается.

Я хотел бы посмотреть, смогу ли я сделать так, чтобы иконка изменяемого размера оставалась в нижней части элемента div по мере его увеличения? 

$(".btn").mouseenter(function() {
  $("#thepoem").html($(this).val());

});
$(".btn").mouseleave(function() {
  $("#thepoem").empty();
});

$("#superresizablediv").resizable();
$("#superresizablediv").draggable();
#superresizablediv {
  position: absolute;
  top: 15%;
  left: 5%;
  min-width: 250px;
  min-height: 50px;
  background-color: #5fc0e3;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  border-top-right-radius: 10px;
  z-index: 1
}

#thepoem {
  display: flex;
  display: inherit;
  min-height: 50px;
  min-width: 250px;
  background-color: #5fc0e3;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  border-top-right-radius: 10px;
}
<link href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
<button class="btn" value="Once upon a midnight dreary, while I pondered, weak and weary, Over many a quaint and curious volume of forgotten lore— While I nodded, nearly napping, suddenly there came a tapping, As of some one gently rapping, rapping at my chamber door. “’Tis some
      visitor,” I muttered, “tapping at my chamber door— Only this and nothing more.">The raven verse 1</button>
<button class="btn" value="Ah, distinctly I remember it was in the bleak December;
And each separate dying ember wrought its ghost upon the floor.
    Eagerly I wished the morrow;—vainly I had sought to borrow
    From my books surcease of sorrow—sorrow for the lost Lenore—
For the rare and radiant maiden whom the angels name Lenore—
            Nameless here for evermore.">The raven verse 2</button>
<div id="superresizablediv" class="ui-resizable-se">
  <div id="thepoem"></div>
</div>

1 Ответ

0 голосов
/ 27 ноября 2018

Вам нужно обновить высоту #superresizablediv при вводе мыши и сбросить высоту при отпускании мыши 

var height = '';

$(".btn").mouseenter(function() {
  height = $("#superresizablediv").outerHeight();
  $("#thepoem").html($(this).val());
  $("#superresizablediv").height($("#thepoem").outerHeight())

});
$(".btn").mouseleave(function() {
  $("#thepoem").empty();
  $("#superresizablediv").height(height)
});

$("#superresizablediv").resizable();
$("#superresizablediv").draggable();
#superresizablediv {
  position: absolute;
  top: 15%;
  left: 5%;
  min-width: 250px;
  min-height: 50px;
  background-color: #5fc0e3;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  border-top-right-radius: 10px;
  z-index: 1
}

#thepoem {
  display: flex;
  display: inherit;
  min-height: 50px;
  min-width: 250px;
  background-color: #5fc0e3;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  border-top-right-radius: 10px;
}
<link href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
<button class="btn" value="Once upon a midnight dreary, while I pondered, weak and weary, Over many a quaint and curious volume of forgotten lore— While I nodded, nearly napping, suddenly there came a tapping, As of some one gently rapping, rapping at my chamber door. “’Tis some
      visitor,” I muttered, “tapping at my chamber door— Only this and nothing more.">The raven verse 1</button>
<button class="btn" value="Ah, distinctly I remember it was in the bleak December;
And each separate dying ember wrought its ghost upon the floor.
    Eagerly I wished the morrow;—vainly I had sought to borrow
    From my books surcease of sorrow—sorrow for the lost Lenore—
For the rare and radiant maiden whom the angels name Lenore—
            Nameless here for evermore.">The raven verse 2</button>
<div id="superresizablediv" class="ui-resizable-se">
  <div id="thepoem"></div>
</div>
...