Javascript JQuery:z-索引排序与可拖动div

在以下代码中，我有：

单击相应按钮时弹出的div 如果拖动它们，最后一个活动对象应该在顶部 目前，我的代码在最后一个活动元素被买到最前面的地方无法正常工作。我正在尝试创建一个可扩展的解决方案，在这个解决方案中，以后可能会有五个左右的按钮具有不同的内容

还有，有没有办法让div在显示它们的按钮附近弹出？如果在单击按钮之前拖动按钮，距离会有点大

我当前的尝试如下所示：

  /* 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
  });  

$function{ /*将就绪逻辑合并到一个位置*/ $button-1.Dragable{ 堆栈：“div”， 安全壳：主体 }; $content-1.draggable{ 堆栈：“div”， 安全壳：主体 }; /*隐藏除第一个跳闸元件外的所有跳闸元件*/ $'.trip'，content one'.not'：first'.hide； }; $'button-one'。在'mouseup'上，函数{ 如果！$this.hasClass'ui-draggable-draggable'{ $content-one.toggle； } }; $'content-one'。在'mouseup'上，函数{ /*在按钮鼠标处理程序中重用相同的逻辑*/ 如果！$this.hasClass'ui-draggable-draggable'{ /* 如果内容元素未拖动，则将鼠标向上视为结论 单击事件并旋转跳闸元素的可见性，如下所示 */ 让trip=$'。trip:visible'，'content one'； 让next=trip.next.length==0？$”。trip:first，“content-one”：trip.next； trip.hide； 下一个节目； } }; $function{ $button-2.Dragable{ 堆栈：“div”， 安全壳：主体 }; }; $'button-two'。在'mouseup'上，函数{ 如果！$this.hasClass'ui-draggable-draggable'{ //你的点击功能 $content-two.toggle； } }; $function{ $content-2.draggable{ 堆栈：“div”， 安全壳：主体 }; }; 身体 html{ 位置：绝对位置； 填充：0； 保证金：0； 宽度：100%； 溢出x：隐藏； 溢出-y：继承； 游标：默认值； } 内容{ 最大宽度：100vw； 高度：150vh； } 一个{ 左：5%； 最高：5%； 位置：绝对位置； } 按钮一{ 宽度：100px； 高度：100px； 背景色：青色； 位置：绝对位置； } 内容一{ 显示：无； 光标：全部滚动； 排名前10%； 左：10%； 位置：绝对位置； 顶部：20px； 左：20px； } .旅行{ 宽度：200px； 高度：200px； 背景颜色：蓝色； 颜色：白色； } 两个{ 左：15%； 最高：15%； 位置：绝对位置； } 按钮二{ 宽度：100px； 高度：100px； 背景色：暗灰色； 位置：绝对位置； } 内容二{ 显示：无； 光标：全部滚动； 位置：绝对位置； 顶部：20px； 左：20px； 宽度：200px； 高度：200px； 背景颜色：绿色； 颜色：白色； } 按钮1 第一组 第2组 第3组 按钮2 嘿 基于-经过一些修改，我会这样做：

使用data-*属性存储目标内容选择器ID 使用Event.clientX/Y-获取单击坐标 使用.css{left:X，top:Y}放置内容 将所有元素放在同一父级中，以解释有问题的z索引和帮助堆栈：'.draggable'，完成其工作 jQuery$=>{ 常量$drag=$'.draggable'.draggable{ 堆栈：'.draggable'， 遏制：“身体” }; //修复安全壳外故障 $$drag.draggable'option'.containment.on'mouseleave'，=>drag.trigger'mouseup'； 设z=10；//内容zIndex将在内容切换时递增 $'.button'。“单击”时，功能EV{ 如果$this.hasClass'ui-draggable-draggable'返回； $$this.data'content'.css{left:ev.clientX，top:ev.clientY，zIndex:++z}.toggle； }; $'.content'。单击，函数{ const$trip=$this.find'.trip'，trip=$trip.length； 这个。|计数|=0； $trip.eq++this.\u计数%trip.show.sides$trip.hide； }; }; html， 身体{ 身高：100%； 保证金：0； } 身体{ 背景颜色：灰色； } .按钮{ 宽度：30vh； 高度：30vh； 背景色：青色； } .内容{ 宽度：45vh； 高度：45vh； 显示：无； 光标：全部滚动； 位置：绝对位置； 背景颜色：蓝色； 颜色：白色； } .trip~.trip{ 显示：无； } [数据内容=内容二]{背景：海蓝宝石；} 内容二{背景：紫红色；} 切换一 一1 一二 一三 切换二 二1 两个2

---

为了实现您所追求的订单行为，我建议对HTML结构进行一些更改。您想要实现的是一个扁平的HTML结构，以便可拖动的元素（即当前嵌套在1和2中的元素）可以相对于另一个元素（即在同一个包含元素/DIV中）按z顺序排列

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

要将可拖动对象定位在被单击的按钮附近，可以使用JQuerys方法获取被单击按钮的左上角坐标。然后，您可以将这些直接传递给可拖动元素的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函数将元素指定为最顶层的元素 R 与其他因素相关 */ 函数setToOpelement{ var-zIndexMax=0； $'.content，.button'.eachfunctioni，elem{ var zIndex=Number.parseInt$elem.css'z-index'； zIndex=Number.isNaNzIndex？0:zIndex； zIndexMax=Math.maxzIndexMax，zIndex； }; element.css{ zIndex:zIndexMax+1 }; } $function{ /*防止鼠标离开文档后继续拖动*/ $document.mouseleave函数{ $document.triggerUp }; $.content、.button.draggable{ 助手：原创， 安全壳：主体， 开始：functionevent，ui{ /* helper是我们开始拖动的元素 */ setToTopui.helper； } }; $'.trip'.not'：first'.hide； }; $'.button'。在“mouseup”上，函数{ /*使单击的按钮出现在前面*/ 设置为$this； 如果！$this.hasClass'ui-draggable-draggable'{ var-toggleTarget=$.content+$this.datatarget； toggleTarget.toggle； 如果toggleTarget.is'：可见{ /*使新切换的元素在顶部可见*/ SetToTopogletarget； /*这个按钮的位置*/ const position=$this.position； /*将目标定位在按钮附近，略微偏移*/ toggleTarget.css{ 左：位置。左+10， 顶部：位置。顶部+10 }; } } }; $'.content'。在“mouseup”上，函数{ 如果！$this.hasClass'ui-draggable-draggable'{ 让trip=$'。trip:visible'，this； 让next=trip.next.length==0？$'.trip:first'，this:trip.next； trip.hide； 下一个节目； } }; 身体 html{ 位置：绝对位置； 填充：0； 保证金：0； 宽度：100%； 溢出x：隐藏； 溢出-y：继承； 游标：默认值； } 内容{ 最大宽度：100vw； 高度：150vh； } .内容{ 显示：无； 光标：全部滚动； 位置：绝对位置； 顶部：20px； 左：20px； 宽度：200px； 高度：200px； 背景颜色：绿色； 颜色：白色； } .内容一{ 排名前10%； 左：10%； } .内容二{ 背景颜色：绿色； 颜色：白色； } .旅行{ 宽度：200px； 高度：200px； 背景颜色：蓝色； 颜色：白色； } .按钮{ 宽度：100px； 高度：100px； 位置：绝对位置； } 两个{ 左：15%； 最高：15%； 背景色：暗灰色； } 一个{ 左：5%； 最高：5%； 背景色：青色； } 按钮1 按钮2 嘿 第一组 第2组 第3组

---

当内容打开并开始拖动按钮时，内容会发生什么情况？@RokoC.Buljan在这种情况下，内容应保持在当前位置，按钮应位于所有对象的顶部。只有点击按钮，内容才会隐藏。谢谢！看起来效果不错！但是：如果我单击例如»Toggle one«，那么»one 1«应该位于所有其他对象的顶部。你有解决这个问题的方法吗？@linamclanahan当然，只需更改为堆栈：'.draggable'，并在CSS中将.content设置为initiallyz index:1；：嗯，好的。如果我点击»切换二«然后再点击»切换一«，则»一1«不在顶部，但它应该在顶部。@Linamanclanahan看一看。只需引入一个可递增变量z并将其用作zIndex»可递增变量«？谢谢你，DacreDenny！很好。“你对距离也有什么想法吗？”Linamanclanahan当然-刚刚补充道：啊！！！！我现在很高兴！Thaaanks！您好，我写Rokos代码工作得更好的原因是以下问题：例如，如果您单击»按钮2«，然后单击»按钮1«，然后将»Hey«-div置于顶部，然后单击»按钮«，然后再次单击»Hey«，则z索引工作不正确。你有解决办法吗@Linamacclanahan啊，对了-对不起，我没有密切关注你的车队-我只是做了一个小小的调整，在mouseup事件的开始添加了setToTop$this-现在可以按要求工作了吗？