您一定已经看到了Mashable上共享功能的拖动，该功能允许访问者直观地在流行的社交网络上共享内容。只需拖动文章中的一张图片，您就可以将拖动的图像放在其图标上，从而在您最喜欢的社交网络上分享该文章。甚至，Nettuts也写了一个很好的教程，介绍如何使用jQuery将此功能实现到您的网站中。但这里有一个非常优雅的解决方案，只需一两行 JavaScript 代码即可使用 jQuery 实现拖拽 n 共享效果。

获取 prettySociable 插件
要实现此功能，您将需要由 Stéphane Caron 编写的 prettySociable jQuery 插件。下载并解压缩插件，它包含启动和运行拖动共享所需的一切。

包括所需的文件
要将拖动 n share 添加到页面，请在页面的 head 标签中添加对 jquery 和 prettySociable 的引用。除了 js 文件夹外，插件文件夹还包括图像和 css 文件夹。您也需要它们，因为css文件夹包含拖动n共享元素所需的样式，而图像文件夹包含各种社交网络的图标。

以下是您需要添加到 head 标签中的完整代码。

<link rel="stylesheet" href="css/prettySociable.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<!--[if lte IE 6]><script src="js/DD_belatedPNG.js" type="text/javascript" charset="utf-8"></script><![endif]-->
<script src="js/jquery.prettySociable.js" type="text/javascript" charset="utf-8"></script>

 
js 文件夹还包括用于修复 IE6 或更早版本中的 PNG 透明度问题的DD_belatedPNG.js。您还需要包括它。

定义可拖动链接
现在要向网页添加拖动 n 共享，请添加一个锚标记<href=“#”>另一个属性 rel=“prettySociable”。

初始化漂亮社交 添加 rel 属性
后，需要初始化脚本。在</正文的正上方添加这行代码>



<script type=“text/javascript” charset=“utf-8”>
 Init prettySocialible
 $.prettySociable（）;
</脚本>



 
在浏览器中查看您的页面，您应该拖动以共享功能正常工作。

自定义默认设置

自定义共享信息
当您在锚标签上添加 rel=“prettySociable” 及其 href=“#” 时，这将共享当前网页的 URL，并使用 head 标签中的标题和元描述在拖动时显示工具提示。
但是，如果您需要共享其他 URL 而不是当前网页，请在 href 属性中指定 URL。您还可以自定义拖动时显示的工具提示信息。您可以通过这种方式在 rel 属性中指定自定义标题和描述。
rel=“prettySociable;title：custom title;摘录：Custom excerpt;”

 

自定义共享面板
默认情况下，PrettySociable支持八个社交网络，但您可以根据需要自定义社交网络及其图标。为此，您需要将设置对象传递给 prettySociable 函数。
这是完整的设置对象



$.prettySociable（{
 动画速度： '快'， /* 快/慢/正常 */
 不透明度：0.90， /* 值介于 0 和 1 之间 */
 share_label：“拖动以共享”， /* 用户将鼠标悬停在项目上时显示的文本 */
 share_on_label：“分享于 ”， /* 用户将鼠标悬停在网站上进行共享时显示的文本 */
 hideflash： false， /* 隐藏页面上的所有 flash 对象，如果 flash 出现在 prettySociable */
 hover_padding： 0，
 网站： {
 脸书 ： {
 “活动”：真，
 'encode'：true， // 如果共享不起作用，请尝试转到 false
 “标题”： “脸书”，
 '网址'： 'http://www.facebook.com/share.php?u='，
 'icon'：'images/prettySociable/large_icons/facebook.png'，
 “尺寸”：{“宽度”：70，“高度”：70}
 },
 推特 ： {
 “活动”：真，
 'encode'：true， // 如果共享不起作用，请尝试转到 false
 “标题”： “推特”，
 '网址'： 'http://twitter.com/home?status='，
 'icon'：'images/prettySociable/large_icons/twitter.png'，
 “尺寸”：{“宽度”：70，“高度”：70}
 },
 美味 ： {
 “活动”：真，
 'encode'：true， // 如果共享不起作用，请尝试转到 false
 “标题”： “美味”，
 '网址'： 'http://del.icio.us/post?url='，
 'icon'：'images/prettySocialble/large_icons/Delicious.png'，
 “尺寸”：{“宽度”：70，“高度”：70}
 },
 digg ： {
 “活动”：真，
 'encode'：true， // 如果共享不起作用，请尝试转到 false
 “标题”： “迪格”，
 '网址'： 'http://digg.com/submit?phase=2&url='，
 'icon'：'images/prettySociable/large_icons/digg.png'，
 “尺寸”：{“宽度”：70，“高度”：70}
 }
 在此处添加更多社交网络
 },
 工具提示：{
 偏移顶部：0，
 偏移左： 10
 },
 弹出窗口：{
 宽度： 900，
 高度： 500
 },
 回调： function（）{} /* 当 prettySociable 关闭时调用 */
 });



 
设置对象是不言自明的。您可以在网站参数中指定要使用的网站以及要用于每个网站的图标。

您可以通过在锚标记的 href 属性中使用缩短的 URL 来进一步增强此拖动 n 共享脚本。

查看演示或下载漂亮的社交jQuery插件。

PS：要使此脚本在IE中正常工作，您需要在样式表中为可拖动的锚元素设置边距和填充值。

- 查看更多信息： http://webdeveloperplus.com/jquery/quick-easy-way-to-implement-drag-n-share-with-jquery/#sthash.TwzfyjXf.dpuf