JqueryUI - Droppable

jQueryUI fornece droppable() método para tornar qualquer elemento DOM soltável em um destino especificado (um destino para elementos arrastáveis).

Sintaxe

o droppable() método pode ser usado em duas formas -

Método $ (seletor, contexto) .droppable (opções)

O método droppable (options) declara que um elemento HTML pode ser usado como um elemento no qual você pode soltar outros elementos. O parâmetro options é um objeto que especifica o comportamento dos elementos envolvidos.

Sintaxe

$(selector, context).droppable (options);

Você pode fornecer uma ou mais opções por vez usando o objeto Javascript. Se houver mais de uma opção a ser fornecida, você irá separá-las usando uma vírgula da seguinte forma -

$(selector, context).droppable({option1: value1, option2: value2..... });

A tabela a seguir lista as diferentes opções que podem ser usadas com este método -

Sr. Não. Opção e descrição
1 aceitar
Esta opção é usada quando você precisa controlar quais elementos arrastáveis ​​devem ser aceitos para soltar. Por padrão, seu valor é*.

Option - accept

Esta opção é usada quando você precisa controlar quais elementos arrastáveis ​​devem ser aceitos para soltar. Por padrão, seu valor é* o que significa que cada item é aceito por droppable.

Isso pode ser do tipo -

  • Selector - Este tipo indica quais elementos arrastáveis ​​são aceitos.

  • Function- Uma função de retorno de chamada será chamada para cada elemento arrastável na página. Esta função deve retornar verdadeiro se o elemento arrastável for aceito por soltável.

Syntax

$( ".selector" ).droppable(
   { accept: ".special" }
);
2 activeClass

Esta opção é uma String que representa uma ou mais classes CSS a serem adicionadas ao elemento soltável quando um elemento aceito (um dos indicados em options.accept ) está sendo arrastado. Por padrão, seu valor éfalse.

Option - activeClass

Esta opção é uma String que representa uma ou mais classes CSS a serem adicionadas ao elemento soltável quando um elemento aceito (um dos indicados em options.accept ) está sendo arrastado. Por padrão, seu valor éfalse.

Syntax

$( ".selector" ).droppable(
   { activeClass: "ui-state-highlight" }
);
3 addClasses

Esta opção, quando definida como false , impedirá que a classe ui-droppable seja adicionada aos elementos droppable. Por padrão, seu valor étrue.

Option - addClasses

Esta opção, quando definida como false , impedirá que a classe ui-droppable seja adicionada aos elementos droppable. Por padrão, seu valor étrue. Isso pode ser desejado como uma otimização de desempenho ao chamar .droppable () init em centenas de elementos.

Syntax

$( ".selector" ).droppable(
   { addClasses: false }
);
4 Desativado

Esta opção, quando definida como verdadeira, desativa o droppable. Por padrão, seu valor éfalse.

Option - disabled

Esta opção quando definida como true desabilita o droppable, isto é, desativa o movimento do item sobre os elementos especificados e a queda nesses elementos. Por padrão, seu valor éfalse.

Syntax

$( ".selector" ).droppable(
   { disabled: true }
);
5 ávido

Esta opção é usada quando você precisa controlar quais elementos arrastáveis ​​devem ser aceitos para soltar em droppables aninhados. Por padrão, seu valor éfalse. Se esta opção for definida como verdadeira , quaisquer droppables pai não receberão o elemento.

Option - greedy

Esta opção é usada quando você precisa controlar quais elementos arrastáveis ​​devem ser aceitos para soltar em droppables aninhados. Por padrão, seu valor éfalse. Se esta opção for definida como verdadeira , quaisquer droppables pai não receberão o elemento.

Syntax

$( ".selector" ).droppable(
   { greedy: true }
);
6 hoverClass

Esta opção é String representando uma ou mais classes CSS a serem adicionadas ao elemento de droppable quando um elemento aceito (um elemento indicado em options.accept ) se move para ele. Por padrão, seu valor éfalse.

Option - hoverClass

Esta opção é String representando uma ou mais classes CSS a serem adicionadas ao elemento de droppable quando um elemento aceito (um elemento indicado em options.accept ) se move para ele. Por padrão, seu valor éfalse.

Syntax

$( ".selector" ).droppable(
   { hoverClass: "drop-hover" }
);
7 escopo

Esta opção é usada para restringir a ação de soltar de elementos arrastáveis ​​apenas para itens que têm o mesmo options.scope (definido em arrastável (opções)). Por padrão, seu valor é"default".

Option - scope

Esta opção é usada para restringir a ação de soltar de elementos arrastáveis ​​apenas para itens que têm o mesmo options.scope (definido em arrastável (opções)). Por padrão, seu valor é"default".

Syntax

$( ".selector" ).droppable(
   { scope: "tasks" }
);
8 tolerância

Esta opção é uma String que especifica qual modo usar para testar se um objeto arrastável está pairando sobre outro. Por padrão, seu valor é"intersect".

Option - tolerance

Esta opção é uma String que especifica como o elemento arrastável deve cobrir o elemento soltável para o soltar sendo aceito. Por padrão, seu valor é"intersect". Os valores possíveis são -

  • fit - Arrastável cobre o elemento soltável por completo.

  • intersect - O elemento arrastável se sobrepõe ao elemento soltável em pelo menos 50% em ambas as direções.

  • pointer - O ponteiro do mouse sobrepõe o elemento soltável.

  • touch - Arrastável se sobrepõe a qualquer quantidade de toque.

Syntax

$( ".selector" ).droppable(
   { tolerance: "fit" }
);

A seção a seguir mostrará alguns exemplos de funcionamento da funcionalidade de soltar.

Funcionalidade padrão

O exemplo a seguir demonstra um exemplo simples de funcionalidade para soltar, sem passar parâmetros para o droppable() método.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <style>
         #draggable-1 { 
            width: 100px; height: 50px; padding: 0.5em; float: left;
            margin: 22px 5px 10px 0; 
         }
         #droppable-1 { 
            width: 120px; height: 90px;padding: 0.5em; float: left; 
            margin: 10px; 	
         }
      </style>
      
      <script>
         $(function() {
            $( "#draggable-1" ).draggable();
            $( "#droppable-1" ).droppable();
         });
      </script>
   </head>
   
   <body>
      <div id = "draggable-1" class = "ui-widget-content">
         <p>Drag me to my target</p>
      </div>
      <div id = "droppable-1" class = "ui-widget-header">
         <p>Drop here</p>
      </div>
   </body>
</html>

Vamos salvar o código acima em um arquivo HTML dropexample.htme abri-lo em um navegador padrão que suporte javascript, você verá a seguinte saída. Agora, você pode brincar com o resultado -

Uso de addClass, disabled e tolerance

O exemplo a seguir demonstra o uso de três opções (a) addClass (b) disabled e (c) tolerance na função de soltar de JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         #draggable-2 { 
            width: 100px; height: 50px; padding: 0.5em; 
            margin: 0px 5px 10px 0; 	    
         }
         #droppable-2,#droppable-3, #droppable-4,#droppable-5 { 
            width: 120px; height: 90px;padding: 0.5em; float: left; 
            margin: 10px; 
         }
      </style>

      <script>
         $(function() {
            $( "#draggable-2" ).draggable();
            $( "#droppable-2" ).droppable({
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            });
				
            $( "#droppable-3" ).droppable({
               disabled : "true",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            });
				
            $( "#droppable-4" ).droppable({
               tolerance: 'touch',
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped with a touch!" );
               }
            });
				
            $( "#droppable-5" ).droppable({
               tolerance: 'fit',
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped only when fully fit on the me!" );
               }
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "draggable-2" class = "ui-widget-content">
         <p>Drag me to my target</p>
      </div>
      <div id = "droppable-2" class = "ui-widget-header">
         <p>Drop here</p>
      </div>
      <div id = "droppable-3" class = "ui-widget-header">
         <p>I'm disabled, you can't drop here!</p>
      </div>
      <div id = "droppable-4" class = "ui-widget-header">
         <p>Tolerance Touch!</p>
      </div>
      <div id = "droppable-5" class = "ui-widget-header">
         <p>Tolerance Fit!</p>
      </div>
   </body>
</html>

Vamos salvar o código acima em um arquivo HTML dropexample.htme abri-lo em um navegador padrão que suporte javascript, você verá a seguinte saída. Agora, você pode brincar com o resultado -

Agora solte o elemento em "Tolerance Touch!" (apenas toque na borda desta caixa) e veja as mudanças do elemento de destino. Agora, para soltar o elemento em "Ajuste de tolerância!" alvo, o elemento arrastável deve se sobrepor totalmente ao elemento alvo, ou seja, "Ajuste de tolerância!" alvo.

Escolha os elementos a serem eliminados

O exemplo a seguir demonstra o uso da opção accept e scope opção na função de arrastar de JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .wrap {
            display: table-row-group;
         }
         #japanpeople,#indiapeople, #javatutorial,#springtutorial { 
            width: 120px; height: 70px; padding: 0.5em; float: left;
            margin: 0px 5px 10px 0; 
         }
         
         #japan,#india,#java,#spring { 
            width: 140px; height: 100px;padding: 0.5em; float: left; 
            margin: 10px;  
         }
      </style>

      <script>
         $(function() {
            $( "#japanpeople" ).draggable();
            $( "#indiapeople" ).draggable();

            $( "#japan" ).droppable({
               accept: "#japanpeople",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            });
				
            $( "#india" ).droppable({
               accept: "#indiapeople",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            });

            $( "#javatutorial" ).draggable({scope : "java"});
            $( "#springtutorial" ).draggable({scope : "spring"});
				
            $( "#java" ).droppable({
               scope: "java",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            });
				
            $( "#spring" ).droppable({
               scope: "spring",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            }); 
         });
      </script>
   </head>
   
   <body>
      <div class = "wrap" >
         <div id = "japanpeople" class = "ui-widget-content">
            <p>People to be dropped to Japan</p>
         </div>

         <div id = "indiapeople" class = "ui-widget-content">
            <p>People to be dropped to India</p>
         </div>

         <div id = "japan" class = "ui-widget-header">
            <p>Japan</p>
         </div>

         <div id = "india" class = "ui-widget-header">
            <p>India</p>
         </div>
      </div>
      <hr/>
         
      <div class = "wrap" >
         <div id = "javatutorial" class = "ui-widget-content">
            <p>People who want to learn Java</p>
         </div>
         <div id = "springtutorial" class = "ui-widget-content">
            <p>People who want to learn Spring</p>
         </div>
         <div id = "java" class = "ui-widget-header">
            <p>Java</p>
         </div>

         <div id = "spring" class = "ui-widget-header">
            <p>Spring</p>
         </div>
      </div>
   </body>
</html>

Vamos salvar o código acima em um arquivo HTML dropexample.htme abri-lo em um navegador padrão que suporte javascript, você verá a seguinte saída. Agora você pode brincar com a saída -

Aqui você pode ver que pode soltar o elemento "Pessoas do Japão" apenas no destino "Japão" e o elemento "Pessoas da Índia" no destino Índia. Da mesma forma, o escopo para "Pessoas que desejam aprender Java" está definido para "Java" e "Pessoas que desejam aprender Spring" está definido para "Destino Spring".

Gerenciando a aparência

O exemplo a seguir demonstra o uso de opções activeClass e hoverClass da classe JqueryUI, que nos ajuda a gerenciar a aparência.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style type = "text/css">
         #draggable-3 { 
            width: 100px; height: 50px; padding: 0.5em; float: left;
            margin: 21px 5px 10px 0;
         }
         #droppable-6 { 
            width: 120px; height: 90px;padding: 0.5em; float: left; 
            margin: 10px; 
         }
         .active {
            border-color : blue;
            background : grey;
         }  
         .hover {
            border-color : red;
            background : green;
         }
      </style>
      
      <script>
         $(function() {
            $( "#draggable-3" ).draggable();
            $( "#droppable-6" ).droppable({
               activeClass: "active",
               hoverClass:  "hover",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "draggable-3" class = "ui-widget-content">
         <p>Drag me to my target</p>
      </div>
      <div id = "droppable-6" class = "ui-widget-header">
         <p>Drop here</p>
      </div>
   </body>
</html>

Vamos salvar o código acima em um arquivo HTML dropexample.htm e abri-lo em um navegador padrão que suporte javascript, você verá a seguinte saída -

Você pode notar que ao arrastar ou pairar (sobre o alvo) do elemento "Arraste-me para o meu alvo", muda a cor do elemento alvo "Solte aqui".

$ (seletor, contexto) .droppable ("action", params) Método

O método droppable ("action", params) pode executar uma ação em elementos droppable, como prevenir a funcionalidade droppable. A ação é especificada como uma string no primeiro argumento (por exemplo, "desativar" para evitar o descarte). Confira as ações que podem ser aprovadas, na tabela a seguir.

Sintaxe

$(selector, context).droppable ("action", params);;

A tabela a seguir lista as diferentes ações que podem ser usadas com este método -

Sr. Não. Ação e Descrição
1 destruir

Esta ação destrói completamente a funcionalidade de soltar de um elemento. Os elementos retornam ao seu estado pré-inicial.

Action - destroy

Esta ação destrói completamente a funcionalidade de soltar de um elemento. Os elementos retornam ao seu estado pré-inicial.

Syntax

$( ".selector" ).droppable("destroy");
2 desabilitar

Esta ação desativa a operação de soltar. Os elementos não são mais elementos soltáveis. Este método não aceita nenhum argumento.

Action - disable

Esta ação desativa a operação de soltar. Os elementos não são mais elementos soltáveis. Este método não aceita nenhum argumento.

Syntax

$( ".selector" ).droppable("disable");
3 habilitar

Esta ação reativa a operação de soltar. Os elementos podem receber novamente um elemento soltável. Este método não aceita nenhum argumento.

Action - enable

Esta ação reativa a operação de soltar. Os elementos podem receber novamente um elemento soltável. Este método não aceita nenhum argumento.

Syntax

$( ".selector" ).droppable("enable");
4 opção

Esta ação obtém um objeto contendo pares de chave / valor que representam o hash de opções para soltar atuais. Este método não aceita nenhum argumento.

Action - option

Esta ação obtém um objeto contendo pares de chave / valor que representam o hash de opções para soltar atuais. Este método não aceita nenhum argumento.

Syntax

var options = $( ".selector" ).droppable( "option" );
5 opção (optionName)

Esta ação obtém o valor do elemento droppable atualmente associado com o optionName especificado . Isso leva um valor String como argumento.

Action - option( optionName )

Esta ação obtém o valor do elemento droppable atualmente associado com o optionName especificado . Isso leva um valor String como argumento.

Syntax

var isDisabled = $( ".selector" ).droppable( "option", "disabled" );
6 opção (optionName, value)

Esta ação define o valor da opção droppable associada ao optionName especificado .

Action - option( optionName, value )

Esta ação define o valor da opção droppable associada ao optionName especificado . O argumento optionName é o nome da opção a ser definida e value é o valor a ser definido para a opção.

Syntax

$( ".selector" ).droppable( "option", "disabled", true );
7 opção (opções)

Esta ação define uma ou mais opções para o droppable. O argumento options é um mapa de pares de opção-valor a serem definidos.

Action - option( options )

Esta ação define uma ou mais opções para o droppable. O argumento options é um mapa de pares de opção-valor a serem definidos.

Syntax

$( ".selector" ).droppable( "option", { disabled: true } );
8 ferramenta

Esta ação retorna um objeto jQuery contendo o elemento droppable. Este método não aceita nenhum argumento.

Esta ação retorna um objeto jQuery contendo o elemento droppable. Este método não aceita nenhum argumento.

Syntax

var widget = $( ".selector" ).droppable( "widget" );

Exemplo

Agora vamos ver um exemplo usando as ações da tabela acima. O exemplo a seguir demonstra o uso do método destroy () .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .draggable-4 { 
            width: 90px; height: 50px; padding: 0.5em; float: left;
            margin: 0px 5px 10px 0;
            border: 1px solid red;  
            background-color:#B9CD6D;
         }
         .droppable-7 { 
            width: 100px; height: 90px;padding: 0.5em; float: left; 
            margin: 10px; 
            border: 1px solid black; 
            background-color:#A39480;
         }
         .droppable.active { 
            background-color: red; 
         }
      </style>
      
      <script>
         $(function() {
            $('.draggable-4').draggable({ revert: true });
            $('.droppable-7').droppable({
               hoverClass: 'active',
               drop: function(e, ui) {
                  $(this).html(ui.draggable.remove().html());
                  $(this).droppable('destroy');
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "i'm destroyed!" );
               }
            });
         });
      </script>
   </head>
   
   <body>
      <div class = "draggable-4"><p>drag 1</p></div>
      <div class = "draggable-4"><p>drag 2</p></div>
      <div class = "draggable-4"><p>drag 3</p></div>

      <div style = "clear: both;padding:10px"></div>

      <div class = "droppable-7">drop here</div>
      <div class = "droppable-7">drop here</div>
      <div class = "droppable-7">drop here</div>
   </body>
</html>

Vamos salvar o código acima em um arquivo HTML dropexample.htm e abri-lo em um navegador padrão que suporte javascript, você verá a seguinte saída -

Se você soltar "drag1" em qualquer um dos elementos chamados "soltar aqui", notará que esse elemento é descartado e esta ação destrói completamente a funcionalidade de soltar de um elemento. Você não pode soltar "drag2" e "drag3" neste elemento novamente.

Gerenciamento de eventos em elementos soltáveis

Além do método droppable (options) que vimos nas seções anteriores, JqueryUI fornece métodos de evento que são acionados para um evento específico. Esses métodos de evento estão listados abaixo -

Sr. Não. Método e descrição do evento
1 ativar (evento, ui)

Este evento é disparado quando o elemento arrastável aceito começa a arrastar. Isso pode ser útil se você quiser fazer com que o droppable "acenda" quando puder ser solto.

Event - activate(event, ui)

Este evento é disparado quando o elemento arrastável aceito começa a arrastar. Isso pode ser útil se você quiser fazer com que o droppable "acenda" quando puder ser solto. Onde o evento é do tipo Evento e ui é do tipo Objeto . Os valores possíveis de ui são -

  • draggable - Um objeto jQuery que representa o elemento arrastável.

  • helper - Um objeto jQuery que representa o auxiliar que está sendo arrastado.

  • position - Posição CSS atual do helper arrastável como objeto {top, left}.

  • offset - Posição atual de deslocamento do helper arrastável como objeto {top, left}.

Syntax

$( ".selector" ).droppable({
   activate: function( event, ui ) {}
});
2 criar (evento, ui)

Este evento é disparado quando um elemento droppable é criado. Onde o evento é do tipo Evento e ui é do tipo Objeto .

Event - create(event, ui)

Este evento é disparado quando um elemento droppable é criado. Onde o evento é do tipo Evento e ui é do tipo Objeto .

Syntax

$( ".selector" ).droppable({
   create: function( event, ui ) {}
});
3 desativar (evento, ui)

Este evento é disparado quando um arrastável aceito para de ser arrastado. Onde o evento é do tipo Evento e ui é do tipo Objeto .

Event - deactivate(event, ui)

Este evento é disparado quando um arrastável aceito para de ser arrastado. Onde o evento é do tipo Evento e ui é do tipo Objeto e os tipos possíveis são -

  • draggable - Um objeto jQuery que representa o elemento arrastável.

  • helper - Um objeto jQuery que representa o auxiliar que está sendo arrastado.

  • position - Posição CSS atual do helper arrastável como objeto {top, left}.

  • offset - Posição atual de deslocamento do helper arrastável como objeto {top, left}.

Syntax

$(".selector").droppable(
   deactivate: function(event, ui) {}
);
4 drop (evento, ui)

Esta ação é disparada quando um elemento é solto no droppable. Isso é baseado na opção de tolerância . Onde o evento é do tipo Evento e ui é do tipo Objeto .

Event - drop(event, ui)

Esta ação é disparada quando um elemento é solto no droppable. Isso é baseado na opção de tolerância . Onde o evento é do tipo Evento e ui é do tipo Objeto e os tipos possíveis são -

  • draggable - Um objeto jQuery que representa o elemento arrastável.

  • helper - Um objeto jQuery que representa o auxiliar que está sendo arrastado.

  • position - Posição CSS atual do helper arrastável como objeto {top, left}.

  • offset - Posição atual de deslocamento do helper arrastável como objeto {top, left}.

Syntax

$(".selector").droppable(
   drop: function(event, ui) {}
);
5 fora (evento, ui)

Este evento é disparado quando um elemento arrastável aceito é arrastado para fora do droppable. Isso é baseado na opção de tolerância . Onde o evento é do tipo Evento e ui é do tipo Objeto .

Event - out(event, ui)

Este evento é disparado quando um elemento arrastável aceito é arrastado para fora do droppable. Isso é baseado na opção de tolerância . Onde o evento é do tipo Evento e ui é do tipo Objeto .

Syntax

$(".selector").droppable(
   out: function(event, ui) {}
);
6 sobre (evento, ui)

Este evento é disparado quando um elemento arrastável aceito é arrastado sobre o elemento arrastável. Isso é baseado na opção de tolerância . Onde o evento é do tipo Evento e ui é do tipo Objeto .

Event - over(event, ui)

Este evento é disparado quando um elemento arrastável aceito é arrastado sobre o elemento arrastável. Isso é baseado na opção de tolerância . Onde event é do tipo Event e ui é do tipo Object . E os tipos possíveis são -

  • draggable - Um objeto jQuery que representa o elemento arrastável.

  • helper - Um objeto jQuery que representa o auxiliar que está sendo arrastado.

  • position - Posição CSS atual do helper arrastável como objeto {top, left}.

  • offset - Posição atual de deslocamento do helper arrastável como objeto {top, left}.

Syntax

$(".selector").droppable(
   over: function(event, ui) {}
);

Exemplo

O exemplo a seguir demonstra o uso do método de evento durante a funcionalidade de descarte. Este exemplo demonstra o uso de eventos drop , over e out .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         #draggable-5 { 
            width: 100px; height: 50px; padding: 0.5em; float: left;
            margin: 22px 5px 10px 0; 
         }
         #droppable-8 {    
            width: 120px; height: 90px;padding: 0.5em; float: left; 
            margin: 10px;
         }
      </style>
      
      <script>
         $(function() {
            $( "#draggable-5" ).draggable();
            $("#droppable-8").droppable({
               drop: function (event, ui) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               },  
					
               over: function (event, ui) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "moving in!" );
               },
               out: function (event, ui) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "moving out!" );
               }      
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "draggable-5" class = "ui-widget-content">
         <p>Drag me to my target</p>
      </div>
      <div id = "droppable-8" class = "ui-widget-header">
         <p>Drop here</p>
      </div>
   </body>
</html>

Vamos salvar o código acima em um arquivo HTML dropexample.htm e abri-lo em um navegador padrão que suporte javascript, você verá a seguinte saída -

Aqui, você notará como a mensagem no elemento soltável muda conforme você arrasta o elemento.