draggable/droppable

accept option displayed

by drrrreams

HTML

<p>
  red circle will appear only if red circle is dropped here
  </p>
<div class="droppable redDest">
</div>
<br/>
 <p>
  blue square will appear when only the blue circle is dropped here
  </p>
<div class="droppable blueDest">
</div>



<div style="clear: both;"></div>

<div class="draggable red"></div>

<div class="draggable blue"></div>

CSS

.droppable {
    float: left;
    position: relative;
    width: 80px;
    height: 80px;
    border: 1px solid #999;
    margin: 10px;
    margin-left: 10px !important;
}

.droppable div {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -30px;
    margin-top: -15px;
}

.draggable {
    width: 50px;
    height: 50px;
}

.red { background-color: red; border-radius: 50%; }
.blue { background-color: blue; border-radius: 50%; }

p {
  text-align: center;
  height: 100px;
  width: 100px;
  border: 2px solid black;
  
}

.redDest {
    background-color: red;
    border-radius: 50%;
    margin: 0 auto;
    position: absolute;
    top: 20px;
    visibility: hidden;
    }
    
.blueDest { 
    background-color: blue;
    border-radius: 0px;
    margin: 0 auto;
    position: absolute;
    top: 122px; 
    visibility: hidden;
    }

JavaScript

$(".blueDest").droppable({
    accept: '.blue',
    drop: function(e,ui) {
       $(this).css('visibility','visible')
    }
});

$(".redDest").droppable({
    accept: '.red',
    drop: function(e,ui) {
       $(this).css('visibility','visible')
    }
});


$("div.draggable").draggable({
    revert: "invalid"
});