0

我刚刚开始使用 pep.jquery.js。我不确定它有多受欢迎，但事实证明它对我一直在开发的一些移动网站非常有用。

然而，我确实遇到了一个问题。我想拖动当前被拖动的孩子的父母。例如，仅通过其标题栏而不是从其中的内容拖动整个父级。

当前代码：

<body>
<div class='window'>
<div class='titlebar'>
</div>
</div>
</body>


$('.titlebar').pep({axis: 'x',stop: handleMenuDrag,useCSSTranslation: false})
4

1 回答 1

2

你想要做的是使用 pep 的elementsWithInteraction选项，它基本上告诉插件我们要移动的元素中的这个元素有交互，不应该触发移动。

工作 Codepen 演示

尝试这样的事情：

HTML

<div class='window'>
  <div class='title'>Window</div>
  <div class='content'></div>
</div>

CSS

.window { height: 300px; width: 300px; border: 1px solid #333; }
.title  { height: 10%; background: #ccc; }
.content{ height: 90%; background: #eee }
.top    { z-index: 100 }

JS

$('.window').pep({
  elementsWithInteraction: '.content',
  initiate: function(){ 
    $('.window.top').removeClass('top');
    this.$el.addClass('top');
  }
});

我还添加了一个小逻辑，告诉带有单击标题栏的窗口移动到顶部。

于 2013-10-23T01:18:03.657 回答