All geek questions in one place

Set the draggable start to the bottom right

I have a resizable draggable option and it works very well. But there is a small problem that I encountered. I have drag-and-drop content with an expanding and collapsing field. I want the draggable to crash, I want it to crash from top to bottom, not bottom to top. Explain what happens:

$(function() {
  $(".draggable-parent").draggable({
    handle: ".draggable-handle",
    drag: function( event, ui ) {
      $(this).css({
        "right": "auto",
        "bottom": "auto"
      });
    }
  });
  $(".draggable-parent .resizable-content").resizable({
    minHeight: 100,
    minWidth: 100,
    handles: "se"
  });
  $(".min-max").click(function(e) {
    e.preventDefault();
    $(this).closest("h3").next(".real-content").slideToggle();
    $(this).toggleClass("max");
  });
});
* {
  font-family: 'Open Sans';
  font-size: 10pt;
  line-height: 1;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.draggable-parent {
  border: 2px solid #3c3c3c;
  display: inline-block;
  position: fixed;
  border-radius: 4px;
  -moz-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  -o-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  right: 10px;
  bottom: 10px;
}

.draggable-parent .resizable-content {
  min-height: 50px;
  min-width: 100px;
  padding-bottom: 20px;
  height: auto !important; /* For making sure no whitespace outside. */
}

.draggable-parent .resizable-content .draggable-handle {
  background-color: #3c3c3c;
  color: #fff;
  font-size: 12.5px;
  padding: 5px;
  cursor: move;
  margin: 0;
  position: relative;
  padding-right: 25px;
}

.ui-resizable-resizing,
.ui-draggable-dragging {
  opacity: 0.75;
}

.min-max {
  position: absolute;
  width: 14px;
  height: 14px;
  background: url("/img/c8ba5a23587a23436cf0f2ad1f5beb38.png") -1px -1px #fff;
  top: 50%;
  right: 3px;
  margin-top: -8px;
  border-radius: 4px;
}

.min-max.max {
  background-image: url("https://i.stack.imgur.com/2OQlp.png");
}

.real-content {
  background-color: #f90;
  padding: 15px;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="draggable-parent">
  <div class="resizable-content">
    <h3 class="draggable-handle">Draggable &amp; Collapsable <a href="#" class="min-max"></a></h3>
    <div class="real-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br />Fugit corrupti quae quia, perferendis porro voluptas itaque<br />recusandae facilis numquam, eius expedita hic minima<br />accusamus consequuntur voluptate!</p>
    </div>
  </div>
</div>
Run codeHide result

Steps to play:

  • Run the snippet.
  • Click the expand or collapse button. ( )
  • You will notice that the window expands or collapses based on the source rightand bottom(i.e. slides).
  • Drag a little.
  • Click the expand or collapse button. ( )
  • You will notice that the window expands or collapses based on both the source (i.e. slides). topleft

Desired behavior:

- , , bottom right, top left.

, , ? .

:

, bottom right, .

drag: function( event, ui ) {
  $(this).css({
    "right": "auto",
    "bottom": "auto"
  });
}

, , , :

$(function() {
  $(".draggable-parent").draggable({
    handle: ".draggable-handle"
  });
  $(".draggable-parent .resizable-content").resizable({
    minHeight: 100,
    minWidth: 100,
    handles: "se"
  });
  $(".min-max").click(function(e) {
    e.preventDefault();
    $(this).closest("h3").next(".real-content").slideToggle();
    $(this).toggleClass("max");
  });
});
* {
  font-family: 'Open Sans';
  font-size: 10pt;
  line-height: 1;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.draggable-parent {
  border: 2px solid #3c3c3c;
  display: inline-block;
  position: fixed;
  border-radius: 4px;
  -moz-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  -o-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  right: 10px;
  bottom: 10px;
}

.draggable-parent .resizable-content {
  min-height: 50px;
  min-width: 100px;
  padding-bottom: 20px;
  height: auto !important; /* For making sure no whitespace outside. */
}

.draggable-parent .resizable-content .draggable-handle {
  background-color: #3c3c3c;
  color: #fff;
  font-size: 12.5px;
  padding: 5px;
  cursor: move;
  margin: 0;
  position: relative;
  padding-right: 25px;
}

.ui-resizable-resizing,
.ui-draggable-dragging {
  opacity: 0.75;
}

.min-max {
  position: absolute;
  width: 14px;
  height: 14px;
  background: url("/img/c8ba5a23587a23436cf0f2ad1f5beb38.png") -1px -1px #fff;
  top: 50%;
  right: 3px;
  margin-top: -8px;
  border-radius: 4px;
}

.min-max.max {
  background-image: url("https://i.stack.imgur.com/2OQlp.png");
}

.real-content {
  background-color: #f90;
  padding: 15px;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="draggable-parent">
  <div class="resizable-content">
    <h3 class="draggable-handle">Draggable &amp; Collapsable <a href="#" class="min-max"></a></h3>
    <div class="real-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br />Fugit corrupti quae quia, perferendis porro voluptas itaque<br />recusandae facilis numquam, eius expedita hic minima<br />accusamus consequuntur voluptate!</p>
    </div>
  </div>
</div>
Hide result
+4
1

:

  • right bottom.
  • left top auto right bottom.
$(this).css({
  "left": "auto",
  "top": "auto",
  "right": $(this).position().right,            // undefined
  "top": $(this).position().top                 // undefined
});

, jQuery position() offset(), left top, .

? - jQuery, :

"right": ($(window).width() - ($(this).offset().left + $(this).outerWidth())),
"bottom": ($(window).height() - ($(this).offset().top + $(this).outerHeight()))

. drag. API Draggable . , reset right bottom drag , left top stop.

, :

drag: function( event, ui ) {
  $(this).css({
    "right": "auto",
    "bottom": "auto"
  });
},
stop: function (event, ui) {
  $(this).css({
    "right": ($(window).width() - ($(this).offset().left + $(this).outerWidth())),
    "bottom": ($(window).height() - ($(this).offset().top + $(this).outerHeight())),
    "left": "auto",
    "top": "auto"
  });
}

, , , :

$(function() {
  $(".draggable-parent").draggable({
    handle: ".draggable-handle",
    drag: function( event, ui ) {
      $(this).css({
        "right": "auto",
        "bottom": "auto"
      });
    },
    stop: function (event, ui) {
      $(this).css({
        "right": ($(window).width() - ($(this).offset().left + $(this).outerWidth())),
        "bottom": ($(window).height() - ($(this).offset().top + $(this).outerHeight())),
        "left": "auto",
        "top": "auto"
      });
    }
  });
  $(".draggable-parent .resizable-content").resizable({
    minHeight: 100,
    minWidth: 100,
    handles: "se"
  });
  $(".min-max").click(function(e) {
    e.preventDefault();
    $(this).closest("h3").next(".real-content").slideToggle();
    $(this).toggleClass("max");
  });
});
* {
  font-family: 'Open Sans';
  font-size: 10pt;
  line-height: 1;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.draggable-parent {
  border: 2px solid #3c3c3c;
  display: inline-block;
  position: fixed;
  border-radius: 4px;
  -moz-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  -o-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  right: 10px;
  bottom: 10px;
}

.draggable-parent .resizable-content {
  min-height: 50px;
  min-width: 100px;
  padding-bottom: 20px;
  height: auto !important; /* For making sure no whitespace outside. */
}

.draggable-parent .resizable-content .draggable-handle {
  background-color: #3c3c3c;
  color: #fff;
  font-size: 12.5px;
  padding: 5px;
  cursor: move;
  margin: 0;
  position: relative;
  padding-right: 25px;
}

.ui-resizable-resizing,
.ui-draggable-dragging {
  opacity: 0.75;
}

.min-max {
  position: absolute;
  width: 14px;
  height: 14px;
  background: url("https://i.stack.imgur.com/2OQlp.png") -1px -1px #fff;
  top: 50%;
  right: 3px;
  margin-top: -8px;
  border-radius: 4px;
}

.min-max.max {
  background-image: url("https://i.stack.imgur.com/L9GL9.png");
}

.real-content {
  background-color: #f90;
  padding: 15px;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="draggable-parent">
  <div class="resizable-content">
    <h3 class="draggable-handle">Draggable &amp; Collapsable <a href="#" class="min-max"></a></h3>
    <div class="real-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br />Fugit corrupti quae quia, perferendis porro voluptas itaque<br />recusandae facilis numquam, eius expedita hic minima<br />accusamus consequuntur voluptate!</p>
    </div>
  </div>
</div>
Hide result

, ! , - , . , , , : draggable - !.

, , .

+1

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

More articles:


All Articles