Question

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

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

当前代码：

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


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

Answer 1

你想要做的是使用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'); } });

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

如何使用pep.jquery.js从子级拖动父级

1 个答案: