我刚开始使用pep.jquery.js。我不确定它有多受欢迎,但它对我一直在研究的一些移动网站非常有用。
然而,我确实遇到了一个问题。我想拖动当前孩子的父级被拖动。例如,仅通过标题栏而不是内容中的内容拖动整个父级。当前代码:
<body>
<div class='window'>
<div class='titlebar'>
</div>
</div>
</body>
$('.titlebar').pep({axis: 'x',stop: handleMenuDrag,useCSSTranslation: false})
答案 0 :(得分:2)
你想要做的是使用pep的elementsWithInteraction
选项,它基本上告诉插件我们想要移动的元素中的元素具有交互,并且不应该触发运动。
<强> Working Codepen Demo 强>
尝试这样的事情:
<强> 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');
}
});
我还添加了一个小逻辑,告诉窗口点击的标题栏移到顶部。