beatiful-sortablejs
v1.0.1
Published
A Javascript Library to make reorderable list
Readme
��#� �B�e�a�u�t�i�f�u�l�-�s�o�r�t�a�b�l�e�-�j�s�.�
�
�b�e�a�u�t�i�f�u�l�-�s�o�r�t�a�b�l�e�-�j�s� �i�s� �a� �J�a�v�a�S�c�r�i�p�t� �l�i�b�r�a�r�y� �f�o�r� �r�e�o�r�d�e�r�a�b�l�e� �d�r�a�g�-�a�n�d�-�d�r�o�p� �l�i�s�t�s�.�
�
�
�
�D�e�m�o� �:� �h�t�t�p�s�:�/�/�g�i�t�h�u�b�.�c�o�m�/�t�a�h�i�r�1�5�0�/�b�e�a�u�t�i�f�u�l�-�s�o�r�t�a�b�l�e�-�j�s�/�e�d�i�t�/�m�a�s�t�e�r�/�R�E�A�D�M�E�.�m�d�
�
�
�
�#�#� �G�e�t�t�i�n�g� �S�t�a�r�t�e�d�
�
�I�n�s�t�a�l�l� �w�i�t�h� �N�P�M�:�
�
����
�
�$� �n�p�m� �i�n�s�t�a�l�l� �b�e�a�u�t�i�f�u�l�-�s�o�r�t�a�b�l�e�-�j�s� �-�-�s�a�v�e�
�
����
�
�I�m�p�o�r�t� �i�n�t�o� �y�o�u�r� �p�r�o�j�e�c�t�:�
�
����j�a�v�a�s�c�r�i�p�t�
�
�i�m�p�o�r�t� �S�o�r�t�a�b�l�e� �f�r�o�m� �'�b�e�a�u�t�i�f�u�l�-�s�o�r�t�a�b�l�e�-�j�s�'�;�
�
����
�
�
�
�O�r� �c�o�n�n�e�c�t� �a� �C�D�N� �l�i�n�k�
�
����j�a�v�a�s�c�r�i�p�t�
�
�<�s�c�r�i�p�t� �s�r�c�=�"�h�t�t�p�s�:�/�/�g�i�t�h�u�b�.�c�o�m�/�t�a�h�i�r�1�5�0�/�b�e�a�u�t�i�f�u�l�-�s�o�r�t�a�b�l�e�-�j�s�/�e�d�i�t�/�m�a�s�t�e�r�/�R�E�A�D�M�E�.�m�d�"�>�<�/�s�c�r�i�p�t�>�
�
����
�
�
�
�#�#� �U�s�a�g�e�
�
����h�t�m�l�
�
� �<�d�i�v� �c�l�a�s�s�=�"�s�o�r�t�a�b�l�e�-�c�o�n�t�a�i�n�e�r�"�>�
�
� � � � � �<�d�i�v� �c�l�a�s�s�=�"�s�o�r�t�"�>�
�
� � � � � � � �<�s�p�a�n�>�H�e�l�l�o� �I� �a�m� �a� �E�l�e�m�e�n�t� �1�<�/�s�p�a�n�>�
�
� � � � � �<�/�d�i�v�>�
�
� � � � � �<�d�i�v� �c�l�a�s�s�=�"�s�o�r�t�"�>�
�
� � � � � � � �<�s�p�a�n�>�H�e�l�l�o� �I� �a�m� �a� �E�l�e�m�e�n�t� �2�<�/�s�p�a�n�>�
�
� � � � � �<�/�d�i�v�>�
�
� � � � � �<�d�i�v� �c�l�a�s�s�=�"�s�o�r�t�"�>�
�
� � � � � � � �<�s�p�a�n�>�H�e�l�l�o� �I� �a�m� �a� �E�l�e�m�e�n�t� �3�<�/�s�p�a�n�>�
�
� � � � � �<�/�d�i�v�>�
�
� � � � � �<�d�i�v� �c�l�a�s�s�=�"�s�o�r�t�"�>�
�
� � � � � � � �<�s�p�a�n�>�H�e�l�l�o� �I� �a�m� �a� �E�l�e�m�e�n�t� �4�<�/�s�p�a�n�>�
�
� � � � � �<�/�d�i�v�>�
�
� � �<�/�d�i�v�>�
�
����
�
����j�a�v�a�s�c�r�i�p�t�
�
� �c�o�n�s�t� �e�l�e�m�e�n�t�s� �=� �d�o�c�u�m�e�n�t�.�q�u�e�r�y�S�e�l�e�c�t�o�r�A�l�l�(�"�.�s�o�r�t�"�)�;�
�
� �d�i�v�s�T�o�S�o�r�t�.�f�o�r�E�a�c�h�(�(�i�t�e�m�)� �=�>� �{�
�
� � � �c�o�n�s�t� �s�o�r�t�a�b�l�e� �=� �n�e�w� �S�o�r�t�a�b�l�e�(�i�t�e�m�)�
�
� �}�)�;�
�
����
�
�
�
�#�#� �O�p�t�i�o�n�s�
�
�O�p�t�i�o�n�s� �o�b�j�e�c�t� �c�a�n� �b�e� �a�s�s�i�g�n� �b�y� �g�i�v�i�n�g� �s�e�c�o�n�d� �a�r�g�u�m�e�n�t�.�
�
����j�a�v�a�s�c�r�i�p�t�
�
� �c�o�n�s�t� �s�o�r�t�a�b�l�e� �=� �n�e�w� �S�o�r�t�a�b�l�e�(�i�t�e�m�,� �{�
�
� � � � �i�t�e�m�C�l�a�s�s�:� �"�i�t�e�m�-�c�l�a�s�s�"�,� �/�/� �c�l�a�s�s� �a�p�p�l�i�e�s� �t�o� �e�v�e�r�y� �s�o�r�t�a�b�l�e� �e�l�e�m�e�n�t�
�
� � � � �d�r�a�g�g�i�n�g�C�l�a�s�s�:� �"�d�a�r�g�g�i�n�g�"�,� �/�/� �c�l�a�s�s� �w�i�l�l� �a�p�p�l�y� �w�h�e�n� �d�r�a�g�g�i�n�g� �s�t�a�r�t�
�
� � � � �d�i�s�a�b�l�e�d�C�l�a�s�s�:� �"�d�i�s�a�b�l�e�d�"�,� �/�/� �c�l�a�s�s� �w�i�l�l� �a�p�p�l�y� �i�f� �s�o�r�t�i�n�g� �i�s� �d�i�s�a�b�l�e�
�
� � � � �z�o�o�m�:� �1�,� �/�/� �i�t� �i�s� �v�i�e�w�p�o�r�t� �z�o�o�m� �v�a�l�u�e� �(�i�f� �h�a�v�e� �c�s�s� �z�o�o�m� �p�r�o�p�e�r�t�y�)�
�
� � � � �c�o�n�t�a�i�n�e�r�s�:� �"�s�o�r�t�-�c�o�n�t�a�i�n�e�r�"�,� �/�/� �c�o�m�m�a� �s�e�p�e�r�a�t�e�d� �a�p�p�e�n�d�a�b�l�e� �b�o�x�e�s� �c�l�a�s�s�e�s�
�
� � � � �f�a�l�l�B�a�c�k�E�l�e�m�e�n�t�:� �i�t�e�m�.�c�l�a�s�s�L�i�s�t�.�c�o�n�t�a�i�n�s�(�"�f�a�l�l�b�a�c�k�"�)� �/�/� �i�t� �i�s� �n�o�t� �s�o�r�t�a�b�l�e�,� �i�t� �j�u�s�t� �a�p�p�e�n�d� �t�h�i�s� �f�a�l�l�b�a�c�k� �h�t�m�l�
�
� � � � � � �?� ��<�d�i�v� �c�l�a�s�s�=�"�f�a�l�l�b�a�c�k�-�e�l�e�m�e�n�t�"�>�
�
� � � � � � � � � �<�s�p�a�n�>�I� �a�m� �f�a�l�l�b�a�c�k�<�/�s�p�a�n�>�
�
� � � � � � � � � �<�/�d�i�v�>��
�
� � � � � � �:� �n�u�l�l�,�
�
� � � � �f�a�l�l�B�a�c�k�C�l�o�n�e�:� �f�a�l�s�e�,� �/�/� �i�f� �w�i�l�l� �d�r�o�p� �a� �c�l�o�n�e� �o�f� �f�a�l�l�b�a�c�k� �e�l�e�m�e�n�t�
�
� � � � �o�n�S�t�a�r�t�:� �(�s�t�a�r�t�D�e�t�a�i�l�)� �=�>� �{�
�
� � � � � � �/�/� �i�t� �w�i�l�l� �t�r�i�g�g�e�r� �w�h�e�n� �y�o�u� �s�t�a�r�t� �s�o�r�t�i�n�g�
�
� � � � � � �c�o�n�s�o�l�e�.�l�o�g�(�s�t�a�r�t�D�e�t�a�i�l�)�;�
�
� � � � �}�,�
�
� � � � �o�n�D�r�o�p�:� �(�d�e�t�a�i�l�s�)� �=�>� �{�
�
� � � � � � �/�/� �i�t� �w�i�l�l� �t�r�i�g�g�e�r� �a�f�t�e�r� �d�r�o�p�p�e�d� �e�v�e�n� �i�t� �i�s� �s�o�r�t�e�d� �o�r� �n�o�t�
�
� � � � � � �c�o�n�s�o�l�e�.�l�o�g�(�d�e�t�a�i�l�s�)�;�
�
� � � � �}�,�
�
� � � � �o�n�S�o�r�t�:� �(�d�e�t�a�i�l�s�)� �=�>� �{�
�
� � � � � � �/�/� �i�f� �e�l�e�m�e�n�t� �h�a�s� �c�h�a�n�g�e� �o�r� �s�o�r�t�e�d� �i�t� �t�a�k�e�s� �g�u�r�a�n�t�e�e� �t�o� �t�r�i�g�g�e�r� �a�f�t�e�r� �s�o�r�t�i�n�g�
�
� � � � � � �c�o�n�s�o�l�e�.�l�o�g�(�d�e�t�a�i�l�s�)�;�
�
� � � � �}�,�
�
� � �}�)�;�
�
����
�
�#�#�#� ��i�t�e�m�C�l�a�s�s�� �o�p�t�i�o�n�
�
�I�t� �w�i�l�l� �a�d�d� �a� �c�l�a�s�s� �t�o� �e�v�e�r�y� �s�o�r�t�a�b�l�e� �I�t�e�m� �
�
�
�
�#�#�#� ��d�r�a�g�g�i�n�g�C�l�a�s�s�� �o�p�t�i�o�n�
�
�W�h�e�n� �S�o�r�t�a�b�l�e� �I�t�e�m� �s�t�a�r�t�s� �d�r�a�g�g�i�n�g� �f�o�r� �s�o�r�t�i�n�g�,� �t�h�e� �c�l�a�s�s� �w�i�l�l� �a�p�p�l�i�e�d� �a�n�d� �w�h�e�n� �s�o�r�t�e�d� �o�r� �c�a�n�c�e�l� �s�o�r�t�e�d�,� �t�h�e� �c�l�a�s�s� �w�i�l�l� �b�e� �r�e�m�o�v�e�d�.�
�
�
�
�#�#�#� ��d�i�s�a�b�l�e�d�C�l�a�s�s�� �o�p�t�i�o�n�
�
�W�h�e�n� �y�o�u� �d�i�s�a�b�l�e� �a�n�y� �e�l�e�m�e�n�t�,� �t�h�e� �c�l�a�s�s� �w�i�l�l� �b�e� �a�p�p�l�i�e�d� �u�n�t�i�l� �y�o�u� �r�e�-�e�n�a�b�l�e� �i�t�.�
�
�
�
�#�#�#� ��z�o�o�m�� �o�p�t�i�o�n�
�
�I�f� �y�o�u�r� �b�o�d�y� �o�r� �m�a�i�n� �c�o�n�t�a�i�n�e�r� �h�a�s� �C�S�S� �z�o�o�m� �p�r�o�p�e�r�t�y� �o�r� �t�r�a�n�s�f�o�r�m� �s�c�a�l�e�,� �y�o�u� �w�i�l�l� �n�e�e�d� �t�o� �g�i�v�e� �z�o�o�m� �v�a�l�u�e� �w�h�i�c�h� �h�e�l�p� �t�o� �d�r�a�g� �p�e�r�f�e�c�t�l�y�.�
�
�
�
�#�#�#� ��c�o�n�t�a�i�n�e�r�s�� �o�p�t�i�o�n�
�
�I�t� �t�a�k�e�s� �c�s�s� �c�o�m�m�a� �s�e�p�e�r�a�t�e�d� �c�l�a�s�s�e�s� �o�f� �d�i�v�'�s� �c�o�n�t�a�i�n�e�r�s�.�I�t� �w�i�l�l� �a�l�l�o�w� � �t�h�e� �i�t�e�m� �t�o� �d�r�o�p� �i�n�t�o� �z�o�n�t�a�i�n�e�r� �w�h�i�l�e� �s�o�r�t�i�n�g�.�
�
�
�
�#�#�#� ��f�a�l�l�B�a�c�k�E�l�e�m�e�n�t�� �o�p�t�i�o�n�
�
�I�t� �t�a�k�e�s� �H�T�M�L� �D�O�M� �o�b�j�e�c�t� �o�r� �H�T�M�L� �s�t�r�i�n�g�,� �I�t� �i�s� �f�a�l�l�b�a�c�k� �E�l�e�m�e�n�t� �w�h�i�c�h� �w�i�l�l� �d�r�o�p� �i�n�t�o� �y�o�u�r� �c�o�n�t�a�i�n�e�r�.�T�o� �w�o�r�k� �w�i�t�h� �t�h�i�s�,� �c�o�n�t�a�i�n�e�r� �i�s� �r�e�q�u�i�r�e�d�.� �I�t� �w�i�l�l� �n�o�t� �d�r�o�p� �t�h�e� �R�e�a�l� �s�o�r�t�i�n�g� �E�l�e�m�e�n�t�,� �I�t� �w�i�l�l� �d�r�o�p� �y�o�u�r� �f�a�l�l�b�a�c�k� �w�h�i�c�h� �y�o�u�'�v�e� �p�a�s�s�e�d� �t�o� �i�t�.�
�
�
�
�#�#�#� ��f�a�l�l�B�a�c�k�C�l�o�n�e�� �o�p�t�i�o�n�
�
�I�t� �t�a�k�e�s� �B�o�o�l�e�a�n� �v�a�l�u�e� �(�d�e�f�a�u�l�t�s� �t�o� �t�r�u�e�)�.� �I�t� �w�i�l�l� �d�r�o�p� �a� �c�l�o�n�e� �o�f� �y�o�u�r� �f�a�l�l�b�a�c�k� �E�l�e�m�e�n�t�.�
�
�
�
�
�
�#�#�#� �N�o�t�e� �:� �I�n� �t�h�i�s� �v�e�r�s�i�o�n�,� �m�o�b�i�l�e� �o�r� �T�o�u�c�h� �d�e�v�i�c�e�s� �a�r�e� �n�o�t� �s�u�p�p�o�r�t�e�d� �!�
�
�
