Jquery在达到3个元素的限制后禁用droppable

我有两个拖放列表框，我希望我的第二个列表框只允许来自第一个列表框的3个列表项。我的问题是，当我达到极限它的计数器的工作原理，但我得到这个错误：Jquery在达到3个元素的限制后禁用droppable

Uncaught Error: cannot call methods on draggable prior to initialization; attempted to call method 'disable'

，并允许它拖动超过3元。我希望它停止在3个元素，当我从第二个列表框拖出它减去计数器。

var counter = 0; 

$("#listbox2").droppable({ 
    drop: function(event, ui) { 
     if (counter <= 3) { 
      counter++; 
      $('#counter_text').text(counter); 
     } 
     if (counter === 3) { 
      $('#listbox2').droppable("disable"); 
      $('#listbox1 li').draggable("disable"); 
     } 
    } 
}) 

$("#listbox1").droppable({ 
    drop: function(event, ui) { 
     counter--; 
     $('#counter_text').text(counter); 

    } 
})

来源

2016-02-10 Taps101

'$（ '＃ListBox1中礼'）拖动（“disable”）;'但是在你的发布代码中，你并没有初始化任何地方 –

Yu只需要初始化可拖动的元素。这是一个工作示例（一个可怕的造型，BTW）

var counter = 0; 
 
$('#counter_text').text(counter);  
 

 
$('#listbox1 li').draggable({ 
 
    stop: function(event, ui) { 
 
    $(this).css('left',0); 
 
    $(this).css('top',0); 
 
    } 
 
}); 
 

 
$("#listbox2").droppable({ 
 
    drop: function(event, ui) { 
 
    $(this).append(ui.draggable); 
 
    if (counter <= 3) { 
 
     counter++; 
 
     $('#counter_text').text(counter); 
 
    } 
 
    if (counter === 3) { 
 
     $('#listbox2').droppable("disable"); 
 
     $('#listbox1 li').draggable("disable"); 
 
    } 
 
    }, 
 
    hoverClass: 'hover' 
 
}); 
 

 
$("#listbox1").droppable({ 
 
    drop: function(event, ui) { 
 
    counter--; 
 
    if (counter<3) { 
 
     $("li").draggable("enable"); 
 
     $('#listbox2').droppable("enable"); 
 
    } 
 
    $('#counter_text').text(counter);  
 
    $(this).append(ui.draggable); 
 
    $(ui.draggable).draggable('enable'); 
 
    }, 
 
    hoverClass: 'hover' 
 
});

ul { 
 
    border: solid 1px green; 
 
    padding: 5px; 
 
    height: 120px; 
 
} 
 

 
.hover { 
 
    background-color: #CFC; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script> 
 

 
<div id="counter_text"></div> 
 

 
<ul id="listbox1"> 
 
    <li>Item 1</li> 
 
    <li>Item 2</li> 
 
    <li>Item 3</li> 
 
    <li>Item 4</li> 
 
    <li>Item 5</li> 
 
</ul> 
 

 
<ul id="listbox2"> 
 
</ul>

来源

2016-02-10 09:18:13 JotaBe

当它达到极限时，有一种方法可以将元素从listbox2返回到listbox1，正如你可以看到的那样有“counter - ”以迎合元素返回。 – Taps101

对不起，我无法理解你的评论。无论如何，我会尝试回答：在放下之后，您可以根据父级更改放置对象的“可拖动性”。即而不是禁用所有'li'的可拖动性，只有在它们属于第一个列表时才执行。 – JotaBe

您还需要修改drop事件来更改li父项，就像这样'$（this）.append（ui.draggable）;' – JotaBe

检查你的编程'的执行流程：确保你确实初始化插件（例如：被称为$('#listbox1 li').draggable();）试图用它做任何事情之前。

来源

2016-02-10 09:08:49 Transformer

里面的降功能，如果你这样做：

$('#list1').droppable("disable"); 
$('#list2 li').draggable("disable");

您将获得：

未捕获的错误：在初始化之前不能调用可拖动的方法;试图调用方法 '禁用'

我会建议你做同样的timout funtion这样的：

if ($('#list1 li').length >= 3) { 
     window.setTimeout(function() { 
      $('#list1').droppable("disable"); 
      $('#list2 li').draggable("disable"); 
     }, 100) 
     return false; 
     }

工作示例here

来源

2016-02-10 09:42:25 Cyril

Jquery在达到3个元素的限制后禁用droppable

回答

相关问题