Question

我想添加自定义右键单击＆＃34;发送到前面＆＃34;和＆＃34;发送回＆＃34;在可拖动物品中。

HTML

<div id="drag-1" class="draggable">
  <p> You can drag one element </p>
</div>
<div id="drag-2" class="draggable">
    <p> with each pointer </p>
</div>

CSS

#drag-1, #drag-2 {
  width: 25%;
  height: 100%;
  min-height: 6.5em;
  margin: 10%;

  background-color: #29e;
  color: white;

  border-radius: 0.75em;
  padding: 4%;

  -webkit-transform: translate(0px, 0px);
          transform: translate(0px, 0px);
}

#drag-me::before {
  content: "#" attr(id);
  font-weight: bold;
}

供参考：jsfiddle

提前致谢。

Answer 1

您可以在此处看到它：jsFiddle

发送到前面或发送到后面可以轻松实现更改元素的z-index。具有较大z-index值的元素将位于顶部。

例如：在#element1之上发送#element2：

$('#element1').css('z-index', 2);
$('#element2').css('z-index', 1);

请注意，这两个元素必须具有position CSS属性absolute，fixed或relative。我使用了position: relative;（阅读更多here）。

要实现上下文菜单，有许多可用的插件。我使用了漂亮的jQuery contextMenu from medialize。

要使用它，在加载JS库之后（请参阅我添加的外部参考），使用：

$(function(){
    $.contextMenu({
        selector: '.context-menu-one', // I've added this class to the element
        callback: function(key, options) {
            // change the z-index values based on "key" value
        },        
        items: {
            "front": {name: "Send to front"},
            "back": {name: "Send to back"}
        }
    });
});

添加自定义右键单击interact.js拖动项目

1 个答案: