文章/答案/技术大牛

发布

社区首页 >问答首页 >JQuery: Z-具有可拖放div的索引排序

问JQuery: Z-具有可拖放div的索引排序
EN

Stack Overflow用户

提问于 2019-08-05 01:44:18

回答 2查看 873关注 0票数 2

在下面的代码中：

单击相应的按钮时弹出的div。
如果拖动它们，则(最后)活动对象应该位于顶部。

目前，我的代码并不像预期的那样工作，在前面购买最后一个活动元素。我正在尝试创建一个可扩展的解决方案，在该解决方案中，稍后可以有大约5个左右的按钮，并具有不同的内容。

另外，是否有一种方法可以让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>

谢谢你的帮助！)

jquery

html

css

draggable

javascript

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-08-05 02:12:39

基于this answer of mine to your previous question --经过一些修改，我会这样做：

使用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>

票数 2

Stack Overflow用户

发布于 2019-08-05 02:16:30

为了实现您所追求的顺序行为，我建议对HTML结构进行一些更改。您想要的是一个“平面”的HTML结构，以便可拖动的元素(即当前嵌套在#one和#two中的元素)可以相对于另一个元素(即在相同的包含元素/DIV中)进行z排序。

完成之后，您可以使用start事件钩子在draggable()上设置“当前在顶部”的元素。这样做的一个简单方法是引入一个设置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
  });
}

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/57351370

复制

相似问题

问JQuery: Z-具有可拖放div的索引排序
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JQuery: Z-具有可拖放div的索引排序EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JQuery: Z-具有可拖放div的索引排序
EN