拖拽只从一个选项中删除一个项目到另一个

Question

我有2 select：

<div class="bold margin-bottom-10"> 
     Departments possible
     <span style="margin-left: 16%;">Departments selected</span>
</div>

<select name="departmentsSelectable" id="departmentsSelectable" multiple="true">                    
    <option value="1" class="item draggable">Java 1</option>
    <option value="2" class="item draggable">Java 2</option>
    <option value="3" class="item draggable">Java 3</option>
</select>

<select name="departments" id="departments" class="droppable" multiple="true" style="margin-left: 3%;"></select>

提供观点：

但不幸的是，我没有掌握JQuery足以理解这些拖放事件以及如何轻松地管理它们：/我不知道，如何限制只有一个项目。< / p>

以下是此问题的繁琐：http://jsfiddle.net/h90j6xy4/1/

修改

感谢@ saravanan-mp，我插入了http://loudev.com/#demos。

以下是新的：http://jsfiddle.net/h90j6xy4/3/ 。

但是，我仍然希望有一个拖累和放大器。掉落效果，并且只能选择1个元素，我仍然不知道该怎么做