Skip to content

wilblack/dndLists

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 

Repository files navigation

Written by Wil Black, [email protected]
Copyright (c) 2011
This work was originally inspired by my work at Advanced Research Corporation, http://oregonarc.com.
You are free to use this software for commercial and non-commercial use, free of charge provided you 
follow the FreeBSD License (see source code files).

What is it?

dndLists is a drag and drop list plugin for JQuery. It was designed as a tool to sort word lists by dragging and dropping indivdual words. Word lists can then be written to a Javascript array or to a hidden input in a specified form.


See demo here:
http://thedatamind.com/demos/dndLists.html

 --- Reference ---

 - Sources and Sinks -
dndLists uses a source/sink models when determining what list items can be placed in what lists. A list can be a <em>source</em> and/or a <em>sink</em>. In a  <em>source</em> list items can be dragged from the list. The items can only be dropped into a list that is a <em>sink</em> for that their <em>source</em> list. To make a list a <em>sink</em> you use the "sinkFor" method and pass in a dom selector string of the lists you want to accept items from. 

 - Create a list -

$("ul").dndList();


 -- Methods --

 - addWord
Takes a string and wraps it in LI and appends to the list.
Example: Add the word "shoelace" to the list with id "list" 
 
  $("#list").dndList('addWord','shoelace');


<h4>populate</h4>
<dd>Takes an array of text strings and populates a list with them.</dd>
<code>
words = ['a', 'b', 'c'];
$("#myList").dndList("populate",words);
</code>

</dd>


<h4>sinkFor</h4>
<dd>
  Takes a CCS selector string and also DOM elements matching the string to be adding to the list.
  <em>Example: Make all UL's a sink for all LI's </em>
  <code> 
  $("ul").dndList('sinkFor','li');
  </code>
</dd>

<h4>source</h4>
<dd>Makes the list items draggable so they can be dropped into a DOM element specified in the list's <em>sinkFor</em>.
<code>
 $("ul").dndList("source");
</code>
</dd>

<h4>toArray</h4>
<dd>Returns the text content of a list to a Javascript array. Each element of the array is a string.
<code>
list_items = $("#myList").dndList("toArray");
</code>
</dd>

About

Drag-and-Drop Lists Plugin for jQuery

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published