使用 JQuery UI 使 Facebook Like 框可拖动答案

【问题标题】：Making a Facebook Like Box draggable with JQuery UI使用 JQuery UI 使 Facebook Like 框可拖动
【发布时间】：2012-06-05 23:49:14
【问题描述】：

您好，我正在尝试通过将 Facebook Like Box 放置在 div 中来使其可拖动。 Like Box 显示良好，但不拖动。我在它之前有一个 twitter 小部件，它工作得很好。

<div class="twitter"><script>new TWTR.Widget({version: 2, type: 'profile', rpp: 10, interval: 30000, width: 300, height: 300, theme: {shell: {background: '#7a7a7a', color: '#000000'}, tweets: {background: '#ffffff', color: '#000000', links: '#3586b8'}},features: {scrollbar: true, loop: false, live: true, behavior: 'all'}}).render().setUser('twitter').start();</script></div>


<div class="fb"><div class="fb-like-box" data-href="http://www.facebook.com/platform" data-width="292" data-show-faces="true" data-stream="true" data-header="false"></div></div>


$(function(){ $('.twitter').draggable({grid: [ 80, 80 ]}); $('.fb').draggable(); });

感谢观看。

【问题讨论】：

您需要发布用于生成 Facebook Like Box 的代码。 jsFiddle 中的一个例子会很有帮助。
对不起，我不是故意的。我尝试使用所有 3 个选项调用 Like Box：HTML5、fbml 和 iframe。
我是新手，但这是我整理的 jsFiddle：jsfiddle.net/r3ueh

标签： jquery-ui

【解决方案1】：

这里的问题是 Facebook 点赞框创建的 iframe 正在拦截使可拖动插件工作所需的 mousedown 事件。

您在类似框周围创建的 div 仍然是可拖动的，只是不能在 iframe 本身上拖动。你可以在这里看到 - http://jsfiddle.net/3K9uX/1/。

我不相信它可以按照你的意愿工作。 this question 讨论了一个潜在的解决方案。

我要做的是在类似框上方创建一个标题，允许用户拖动整个框。

现场示例 - http://jsfiddle.net/3K9uX/2/

【讨论】：

谢谢！这非常有帮助。