dic
12
2009

Comparte en el FaceBook, twitter, delicius con el efecto Drag to Share en jQuery UI

An article by miguelortega Comments

Encontre este ejemplo muy bueno de como compratir tus temas, imagenes, en el facebook, twitter y delicius, con un efecto de arrastre facil.

Solo tienen que descargar la libreria Jquery UI para los efectos.

Ver Ejemplo

<html> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>Drag to Share Example</title> 
    <link rel="stylesheet" type="text/css" href="dragToShare.css"> 
  </head> 
  <body> 
    <div id="content"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
      <img src="rover.png" alt="Mars Rover"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> 
    </div> 
    <ul id="targets"> 
      <li id="twitter"><a href="http://twitter.com"><!-- --></a></li> 
      <li id="delicious"><a href="http://delicious.com"><!-- --></a></li> 
      <li id="facebook"><a href="http://www.facebook.com"><!-- --></a></li> 
    </ul> 
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> 
    <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script> 
    <script type="text/javascript"> 
	  $(function() {
 
		//cache selector
		var images = $("#content img"),
		  title = $("title").text() || document.title;
 
	    //make images draggable
	    images.draggable({
		  //create draggable helper
		  helper: function() {
		    return $("<div>").attr("id", "helper").html("<span>" + title + "</span><img id='thumb' src='" + $(this).attr("src") + "'>").appendTo("body");
		  },
		  cursor: "pointer",
		  cursorAt: { left: -10, top: 20 },
		  zIndex: 99999,
		  //show overlay and targets
		  start: function() {
		    $("<div>").attr("id", "overlay").css("opacity", 0.7).appendTo("body");
			$("#tip").remove();
			$(this).unbind("mouseenter");
			$("#targets").css("left", ($("body").width() / 2) - $("#targets").width() / 2).slideDown();
		  },
		  //remove targets and overlay
		  stop: function() {
		    $("#targets").slideUp();
			$(".share", "#targets").remove();
		    $("#overlay").remove();
			$(this).bind("mouseenter", createTip);
		  }
		});
 
		//make targets droppable
		$("#targets li").droppable({
		  tolerance: "pointer",
		  //show info when over target
		  over: function() {
		    $(".share", "#targets").remove();
		    $("<span>").addClass("share").text("Share on " + $(this).attr("id")).addClass("active").appendTo($(this)).fadeIn();
		  },
		  drop: function() {
		    var id = $(this).attr("id"),
			  currentUrl = window.location.href,
			  baseUrl = $(this).find("a").attr("href");
 
			if (id.indexOf("twitter") != -1) {
			  window.location.href = baseUrl + "/home?status=" + title + ": " + currentUrl;
			} else if (id.indexOf("delicious") != -1) {
			  window.location.href = baseUrl + "/save?url=" + currentUrl + "&title=" + title;
			} else if (id.indexOf("facebook") != -1) {
			  window.location.href = baseUrl + "/sharer.php?u=" + currentUrl + "&t=" + title;
			}
		  }		  
		});
 
	    var createTip = function(e) {
		  //create tool tip if it doesn't exist
		  ($("#tip").length === 0) ? $("<div>").html("<span>Drag this image to share the page<\/span><span class='arrow'><\/span>").attr("id", "tip").css({ left:e.pageX + 30, top:e.pageY - 16 }).appendTo("body").fadeIn(2000) : null;
		};
 
		images.bind("mouseenter", createTip);
 
		images.mousemove(function(e) {
 
		  //move tooltip
          $("#tip").css({ left:e.pageX + 30, top:e.pageY - 16 });
        });
 
	    images.mouseleave(function() {
 
		  //remove tooltip
		  $("#tip").remove();
	    });
	  });
	</script> 
  </body> 
</html>