Advertisement
oscarviedma

Código Draggable Droppable jQuery UI DIVI

Mar 31st, 2023 (edited)
846
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.07 KB | None | 0 0
  1. <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  2. <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
  3.  
  4. <script>
  5. jQuery(document).ready(function($){
  6. $( "#ov-draggable-1" ).draggable();
  7. $( "#ov-draggable-2" ).draggable();
  8. $( "#ov-draggable-3" ).draggable();
  9. $( "#ov-draggable-4" ).draggable();
  10. $( "#ov-droppable" ).droppable({
  11. classes: {
  12. "ui-droppable-active": "ov-droppable-activo",
  13. "ui-droppable-hover": "ov-droppable-hover"
  14. },
  15. drop: function( event, ui ) {
  16. $( this ).addClass( "ov-droppable-resaltado" );
  17. $( ".ui-draggable-dragging" ).addClass( "ov-draggable-resaltado" );
  18.  
  19. if (ui.draggable.attr('id') == 'ov-draggable-1') {
  20. $('html, body').animate({
  21. scrollTop: $("#diseno-web").offset().top - 140
  22. }, 2000);
  23. }
  24.  
  25. if (ui.draggable.attr('id') == 'ov-draggable-2') {
  26. $('html, body').animate({
  27. scrollTop: $("#diseno-grafico").offset().top - 140
  28. }, 2000);
  29. }
  30.  
  31. if (ui.draggable.attr('id') == 'ov-draggable-3') {
  32. $('html, body').animate({
  33. scrollTop: $("#marketing-digital").offset().top - 140
  34. }, 2000);
  35. }
  36.  
  37. else if (ui.draggable.attr('id') == 'ov-draggable-4') {
  38. $('html, body').animate({
  39. scrollTop: $("#community-manager").offset().top - 140
  40. }, 2000);
  41. }
  42.  
  43. },
  44. out: function( event, ui ) {
  45. $( this ).removeClass( "ov-droppable-resaltado" )
  46. $( ".ui-draggable-dragging" ).removeClass( "ov-draggable-resaltado" );
  47. }
  48. });
  49.  
  50. } );
  51. </script>
  52.  
  53. <script>
  54. // Remover draggable resaltado al hacer scroll
  55. jQuery(document).ready(function( $ ) {
  56. $(window).scroll(function(){
  57. var scroll = jQuery(window).scrollTop();
  58. if (scroll >= 800) {
  59. $( ".ui-draggable" ).removeAttr("style");
  60. $( ".ui-draggable" ).removeClass( "ov-draggable-resaltado" );
  61. }
  62. });
  63. });
  64. </script>
  65.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement