Droppable element accept and scope differences

Question

Droppable element accept and scope differences

Navigation

#1 by (1 votes)

1

In the following code, I have 4 Droppable elements that accept only some Draggable elements.

The acceptance of 2 of these elements is declared with 'scope' and in the other 2 is declared with 'accept'.

What difference does it make in one way or another?

<!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>

javascript html css drag-and-drop

asked by Oren Diaz 11.10.2017 в 01:21

source

1 answer

How to save the variable, without changing the scope Enter values within Variable python

score 1 · Accepted Answer

accept is used when you want to limit only elements that have the selector specified in the accept property:

$(function() {
    $( ".elemento" ).draggable();

    $( "#dropable-contentainer" ).droppable({
       accept: ".wrap .inner-wrap .elemento",
       drop: function( event, ui ) {
         alert("aceptado!");
       }
    });
});

.wrap {
  display: table-row-group;
}
.elemento { 
  width: 120px; height: 70px; padding: 0.5em; float: left;
  margin: 0px 5px 10px 0; 
}
#dropable-contentainer
{
  background:blue;
  width:100px;
  height:100px;
  margin-left:400px;
}

<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>
         
<div class = "wrap" >
  <div class="inner-wrap">
     <div class = "ui-widget-header elemento">
        <p>elemento 1</p>
     </div>
  </div>


   <div class = "ui-widget-header elemento">
      <p>elemento 2</p>
   </div>
   
   <div id="dropable-contentainer">
   </div>
</div>
<hr/>

Notice how you only accept the item that complies with the .wrap .inner-wrap .elemento selector. Although there are 2 elements with class .elemento , only 1 complies with the selector.

scope is used when you want to do it by category. All the elements that have been assigned as draggable with the assigned scope are suitable for the drop over the droppable element:

$(function() {
    $( ".elemento1" ).draggable({scope: "solo-elemento-1" });
    $( ".elemento2" ).draggable({scope: "solo-elemento-2" })

    $( "#dropable-contentainer" ).droppable({
       scope: "solo-elemento-1",
       drop: function( event, ui ) {
         alert("aceptado!");
       }
    });
});

.wrap {
  display: table-row-group;
}
.elemento1, .elemento2 { 
  width: 120px; height: 70px; padding: 0.5em; float: left;
  margin: 0px 5px 10px 0; 
}
#dropable-contentainer
{
  background:blue;
  width:100px;
  height:100px;
  margin-left:400px;
}

<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>
         
<div class = "wrap" >
  <div class="inner-wrap">
     <div class = "ui-widget-header elemento1">
        <p>elemento 1</p>
     </div>
  </div>


   <div class = "ui-widget-header elemento2">
      <p>elemento 2</p>
   </div>
   
   <div id="dropable-contentainer">
   </div>
</div>
<hr/>

Only in the element with scope only-element-1 can it be accepted in the container.