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

Question

我想在可拖动项目中添加自定义右键单击 "Send to Front" 和 "Send to back"。

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 值较大的元素将在顶部。

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

$('#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 个拖动项目中添加自定义右键单击

Add Custom right click in interact.js drag items

jquery

interact.js