在interact.js拖动项中添加自定义单击

Question

我会添加自定义右键单击“发送到前线”和“发送到后退”在拖放项目。

<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;
}

参考：小提琴

提前谢谢。

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; (阅读更多的这里)。

要实现上下文菜单，有几十个插件可用。我用过漂亮的来自中介的jQuery contextMenu。

要使用它，在加载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"}
        }
    });
});