jQuery：使用可拖动的div进行z-index排序

Question

在以下代码中，我有：

1. 单击相应按钮时弹出的div
2. 如果拖动它们，则（最后一个）活动对象应该在顶部

目前，我的代码无法像预期的那样在最后一个活动元素被购买到前面的地方工作。 我正在尝试创建一个可扩展的解决方案，以后可以有大约五个或更多带有不同内容的按钮。

另外，有没有办法让div弹出显示出来的按钮附近？ 如果在单击按钮之前先拖动按钮，则距离会有点大。

我当前的尝试如下所示：

 $(function() { /* Combine on ready logic into one place */ $("#button-one").draggable({ stack: 'div', containment: "body" }); $("#content-one").draggable({ stack: 'div', containment: "body" }); /* Hide all trip elements except for first */ $('.trip', '#content-one').not(':first').hide(); }); $('#button-one').on('mouseup', function() { if (!$(this).hasClass('ui-draggable-dragging')) { $("#content-one").toggle(); } }); $('#content-one').on('mouseup', function() { /* Reuse same logic in #button mouseup handler */ if (!$(this).hasClass('ui-draggable-dragging')) { /* If content element if not dragging, treat mouse up as conclusion of click event and rotate visibility of trip elements like this */ let trip = $('.trip:visible', '#content-one'); let next = trip.next().length === 0 ? $('.trip:first', '#content-one') : trip.next(); trip.hide(); next.show(); } }); $(function() { $("#button-two").draggable({ stack: 'div', containment: "body" }); }); $('#button-two').on('mouseup', function() { if (!$(this).hasClass('ui-draggable-dragging')) { // your click function $("#content-two").toggle(); } }); $(function() { $("#content-two").draggable({ stack: 'div', containment: "body" }); }); 

 body, html { position: absolute; padding: 0; margin: 0; width: 100%; overflow-x: hidden; overflow-y: inherit; cursor: default; } #content { max-width: 100vw; height: 150vh; } #one { left: 5%; top: 5%; position: absolute; } #button-one { width: 100px; height: 100px; background-color: cyan; position: absolute; } #content-one { display: none; cursor: all-scroll; top: 10%; left: 10%; position: absolute; top: 20px; left: 20px; } .trip { width: 200px; height: 200px; background-color: blue; color: white; } #two { left: 15%; top: 15%; position: absolute; } #button-two { width: 100px; height: 100px; background-color: darkgrey; position: absolute; } #content-two { display: none; cursor: all-scroll; position: absolute; top: 20px; left: 20px; width: 200px; height: 200px; background-color: green; color: white; } 

 <div id="content"> <div id="one"> <div id="button-one">Button 1</div> <div id="content-one"> <div class="trip">div 1</div> <div class="trip">div 2</div> <div class="trip">div 3</div> </div> </div> <div id="two"> <div id="button-two">Button 2</div> <div id="content-two">Hey</div> </div> </div> <script src="https://code.jquery.com/jquery-1.7.2.min.js"></script> <script src="https://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script> <script src="https://raw.githubusercontent.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script> 

谢谢您的帮助！ :)

Answer 1

基于我对上一个问题的回答 -经过一些修改后，我会这样做：

• 使用data-*属性存储目标内容选择器ID
• 使用Event.clientX / Y-获取点击坐标
• 使用.css({left: X, top: Y})放置您的内容
• 将所有元素放在同一个父对象中，以解决有问题的z-indexing并帮助stack: '.draggable',完成其工作

 jQuery($ => { const $drag = $('.draggable').draggable({ stack: '.draggable', containment: 'body' }); // Fix out-of-containment glitch $($drag.draggable('option').containment).on('mouseleave', () => $drag.trigger('mouseup')); let z = 10; // Contents zIndex (will increment on content toggle) $('.button').on('click', function(ev) { if ($(this).hasClass('ui-draggable-dragging')) return; $($(this).data('content')).css({left: ev.clientX, top: ev.clientY, zIndex: ++z}).toggle(); }); $('.content').on('click', function() { const $trip = $(this).find('.trip'), tripL = $trip.length; this._count |= 0; $trip.eq(++this._count % tripL).show().siblings($trip).hide(); }); }); 

 html, body { height: 100%; margin: 0; } body { background-color: grey; } .button { width: 30vh; height: 30vh; background-color: cyan; } .content { width: 45vh; height: 45vh; display: none; cursor: all-scroll; position: absolute; background-color: blue; color: white; } .trip~.trip { display: none; } [data-content="#content-two"] {background: aquamarine;} #content-two {background: fuchsia;} 

 <div class="button draggable" data-content="#content-one">Toggle one</div> <div class="content draggable" id="content-one"> <div class="trip">ONE 1</div> <div class="trip">ONE 2</div> <div class="trip">ONE 3</div> </div> <div class="button draggable" data-content="#content-two">Toggle two</div> <div class="content draggable" id="content-two"> <div class="trip">TWO 1</div> <div class="trip">TWO 2</div> </div> <script src="https://code.jquery.com/jquery-1.7.2.min.js"></script> <script src="https://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script> <script src="https://raw.githubusercontent.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script> 

Answer 2

为了实现您想要的订购行为，我建议对您的HTML结构进行一些更改。 您要针对的是一种“扁平的” HTML结构，以便可拖动元素（即当前嵌套在#one和#two ）可以相对于彼此进行z排序（即在相同的包含element / DIV的元素中） 。

完成此操作后，您可以使用draggable()上的start事件挂钩来设置“当前位于顶部”的元素。 一种简单的方法是引入一个设置z-index属性的CSS类。

要将可拖动对象放置在被单击的按钮附近，可以使用JQuerys position()方法获取被单击的按钮的顶部/左侧坐标。 然后，您可以将它们直接传递给可拖动元素的css()方法，如下所示：

  /* Position of this button */
  const position = $(buttonElement).position();

  /* Position target near the button with slight offset */
  draggableElement.css({
    left : position.left + 10,
    top : position.top + 10
  });  

对代码的以下修订应该可以解决问题：

 /* Helper function assigns the element as "top most" element relative to other elements */ function setToTop(element) { var zIndexMax = 0; $('.content, .button').each(function(i, elem) { var zIndex = Number.parseInt($(elem).css('z-index')); zIndex = Number.isNaN(zIndex) ? 0 : zIndex; zIndexMax = Math.max(zIndexMax, zIndex); }); element.css({ zIndex: zIndexMax + 1 }); } $(function() { /* Prevent drag from continuing after mouse leaves document */ $(document).mouseleave(function() { $(document).trigger("mouseup") }); $(".content, .button").draggable({ helper: "original", containment: "body", start: function(event, ui) { /* ui.helper is the element that we're starting to drag */ setToTop(ui.helper); } }); $('.trip').not(':first').hide(); }); $('.button').on('mouseup', function() { /* Cause clicked button to come to front */ setToTop($(this)); if (!$(this).hasClass('ui-draggable-dragging')) { var toggleTarget = $(".content" + $(this).data("target")); toggleTarget.toggle(); if (toggleTarget.is(':visible')) { /* Cause newly toggled element to be visible on top */ setToTop(toggleTarget); /* Position of this button */ const position = $(this).position(); /* Position target near the button with slight offset */ toggleTarget.css({ left: position.left + 10, top: position.top + 10 }); } } }); $('.content').on('mouseup', function() { if (!$(this).hasClass('ui-draggable-dragging')) { let trip = $('.trip:visible', this); let next = trip.next().length === 0 ? $('.trip:first', this) : trip.next(); trip.hide(); next.show(); } }); 

 body, html { position: absolute; padding: 0; margin: 0; width: 100%; overflow-x: hidden; overflow-y: inherit; cursor: default; } #content { max-width: 100vw; height: 150vh; } .content { display: none; cursor: all-scroll; position: absolute; top: 20px; left: 20px; width: 200px; height: 200px; background-color: green; color: white; } .content.one { top: 10%; left: 10%; } .content.two { background-color: green; color: white; } .trip { width: 200px; height: 200px; background-color: blue; color: white; } .button { width: 100px; height: 100px; position: absolute; } #two { left: 15%; top: 15%; background-color: darkgrey; } #one { left: 5%; top: 5%; background-color: cyan; } 

 <div id="content"> <div id="one" class="button" data-target=".one">Button 1</div> <div id="two" class="button" data-target=".two">Button 2</div> <div class="content two">Hey</div> <div class="content one"> <div class="trip">div 1</div> <div class="trip">div 2</div> <div class="trip">div 3</div> </div> </div> <script src="https://code.jquery.com/jquery-1.7.2.min.js"></script> <script src="https://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script> <script src="https://raw.githubusercontent.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script> 

更新

为了防止在拖动过程中鼠标离开文档后继续出现小故障拖动行为，您可以这样做：

/* 
  Helper function assigns the element as "top most" element
  relative to other elements
*/
function setToTop(element) {

  var zIndexMax = 0;

  $('.content, .button').each(function(i, elem) {

    var zIndex = Number.parseInt($(elem).css('z-index'));        
    zIndex = Number.isNaN(zIndex) ? 0 : zIndex;
    zIndexMax = Math.max(zIndexMax, zIndex);     
  });

  element.css({
    zIndex: zIndexMax + 1
  });
}