DAD, el plugin drag and drop muy fácil de manejar

Descarga : DAD

DAD, el plugin drag and drop muy fácil de manejar,el manejar la funcionalidad drag and drop no es tan simple como parece si lo que deseamos es controlar el orden de los elementos, con este plugin el usuario final puede manipular la información presentada en cualquier etiqueta como elementos drag and drop, incluyendo elementos como span, div, etc, lo interesante de este plugin es que tiene mucha flexibilidad a la hora de utilizar estilos, ya que los estilos pueden ser cambiados al mismo tiempo que son modificados.

La implementación
Para la implementación tenemos que importar jquery, el script de DAD incluyendo la hoja de estilos que permite mostrar una mejor apariencia entre los elementos.

Incluimos los archivos necesarios para el uso:

<link rel="stylesheet" href="../source/jquery.dad.css">
    <script src="jquery.min.js"></script>
    <script src="../source/jquery.dad.js"></script>
    <script src="jquery.nicescroll.min.js"></script>

Posteriormente a esto colocamos los elementos que queremos transformar, en este caso con una clase y un id

 <div id="daddy" class="dad">
        <div>
            <div>1</div>
        </div>
        <div>
            <div>2</div>
        </div>
        <div>
            <div>3</div>
        </div>
        <div>
            <div>4</div>
        </div>
        <div>
            <div>5</div>
        </div>
    </div>

Por ultimo agregamos el script que permite el movimiento de los elementos.

 $(function(){
            datos=$('.dad').dad();
             datos.addDropzone('.dad',function(e){})

         });

El script permite manipular todos los elementos sin ningún problema.

Puedes ver el ejemplo y la implementación en el siguiente enlace:
http://konsolestudio.com/dad/ en el encontraras.

 

Contenido relacionado: