Tutorials Point

  Learn script.aculo.us
  script.aculo.us Resources
  Selected Reading

Copyright © 2014 by tutorialspoint

  Home     References     Discussion Forums     About TP  

Drag 'n' Drop with accept Option

previous next AddThis Social Bookmark Button



This is a string or an array of strings describing CSS classes. The droppable will only accept draggables that have one or more of these CSS classes.


Droppables.add('element', {accept: 'cssClass'});

Here cssClass is a CSS class and only element with that class will be accepted in drop zone. You can specify an array of CSS classes.


In this example you will be able to drop only images with "niceOne" CSS class.

<title>Drag and Drop Example</title>
<script type="text/javascript" 
<script type="text/javascript"

<script type="text/javascript">

   window.onload = function() {
   // Make all the images draggables from draggables division.
      function(item) {
         new Draggable(
               revert: true,
               ghosting: true

        hoverclass: 'hoverActive',
        accept: 'niceOne',
        onDrop: moveItem
   // Set drop area by default  non cleared.
   $('droparea').cleared = false;
// The target drop area contains a snippet of instructional
// text that we want to remove when the first item
// is dropped into it.
function moveItem( draggable,droparea){
   if (!droparea.cleared) {
      droparea.innerHTML = '';
      droparea.cleared = true;
<style type="text/css">
#draggables {
   width: 172px;
   border: 3px ridge blue;
   float: left;
   padding: 9px;
#droparea {
   float: left;
   margin-left: 16px;
   width: 172px;
   border: 3px ridge maroon;
   text-align: center;
   font-size: 24px;
   padding: 9px;
   float: left;
.hoverActive {
   background-color: #ffffcc;
.niceOne {
   border:10px dotted red;
#draggables img, #droparea img {
   margin: 4px;
   border:1px solid red;
<div id="draggables">
   <img class="niceOne" src="/images/html.gif"/>
   <img src="/images/css.gif" />
   <img class="niceOne" src="/images/xhtml.gif"/>
   <img src="/images/wml_logo.gif"/>
   <img class="niceOne" src="/images/javascript.gif"/>

<div id="droparea">
   Drag and Drop Your Images in this area

To understand it in better way you can Try it yourself.

previous next Printer Friendly