MVC LIstbox items move using buttons and drag drop

See more:

MVC

jQuery

ListBox

I have three listbox i.e. listbox1 , listbox2 , listbox3 . I am moving items from listbox1 to listbox2 vise-versa using buttons . And moving items from listbox2 to listbox3 using drag drop. When i m applying draggable funtion and droppable function on listbox2, its working fine on drag and drop part. but then i losses control to select the option of listbox2. That's why items are not moving on button click from listbox2 to listbox1.

Code:

$('#Listbox2 option').draggable({
          helper: function () {
              return $('<div>' + $(this).text() + '</div>');
          },
          appendTo: 'body',
          cancel: 'input,textarea,button'
      });

      $('.dropSelect').droppable({
          drop: function (ev, ui) {
              ui.draggable.clone().appendTo(this);
          }
      });

 @Html.ListBox("ListBox1", new MultiSelectList(Model.AvailableFields, "Value", "Text"), htmlAttributes: new { @data_results_width = 170, @style = "width:540px; height:300px ;size=30" })
@Html.ListBox("ListBox2", new MultiSelectList(Model.RequestedColumns, "Value", "Text"), htmlAttributes: new {  @data_results_width = 170, @style = "width:540px; height:300px ; size=30" })
@Html.ListBox("ListBox3", new MultiSelectList("", "Value", "Text"), htmlAttributes: new { @class = "dropSelect", @data_results_width = 170, @style = "width:400px; height:250px ; size=30  " })