MVC LIstbox项目使用按钮和拖放移动 [英] MVC LIstbox items move using buttons and drag drop

问题描述

我有三个列表框，即listbox1，listbox2，listbox3。我使用按钮将项目从listbox1移动到listbox2 vise-versa。并使用拖放将项目从listbox2移动到listbox3。当我在listbox2上应用draggable funtion和droppable函数时，它在拖放部分工作正常。但后来我失去控制权来选择listbox2的选项。这就是为什么项目没有按下从listbox2到listbox1的按钮点击。



代码：

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  " })

推荐答案

（' ＃Listbox2 option'）。draggable（{
helper： function （）{
return

('#Listbox2 option').draggable({ helper: function () { return

（' < div>' +

（ this ）。text（）+ ' < / div>'）;
}，
appendTo：' body'，
取消： ' input，textarea，button'
}）;

(this).text() + '</div>'); }, appendTo: 'body', cancel: 'input,textarea,button' });

这篇关于MVC LIstbox项目使用按钮和拖放移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！