标签: jquery-ui-selectable

在巨大的名单上使用时速度很慢等等.如何让它快速？

我正在使用JQuery UI - 可选.如果元素已被按下并且已经被选中(切换),我想取消选择该元素

你能帮我添加这个功能吗!

我现在面临着另一件我无法弄清楚如何做的事情.

我是jQuery的新手,我正在尝试使图标可拖动,当你将它放入文件夹(.folder div)时,它将被移动到那里.

1. 拖动图标(我知道如何拖动它,但它只在父div中可见,而不是在整个网页上.)
2. 放在#navbar上的一个文件夹(左侧)(再次,我无法弄清楚如何使它在特定div上可以放置)
3. 删除原始内容上移动的div并重新对齐所有其他div
4. 调用php页面将与此div关联的文件移动到所选目录

页面中心的div(我希望它们可拖动)是图标,当您拖动它们然后将它们放在左侧的文件夹上时,它将被移动到那里.

在这里你可以看到它的样子(使用Firefox更好):http://narks.xtreemhost.com/

这只是一个向您展示的测试页面.有人可以帮帮我吗？

要了解网页的结构,请参阅CSS布局中的Windows 7资源管理器(再次感谢IvanIvanić的宝贵帮助1)

编辑jQuery拖放:

$( "div.explorer_icon" ).draggable({
    opacity: 0.50,
    revert: true,
    distance: 30,
    zIndex: 9999,
    scroll: false,
    appendTo: 'body',
    containment: 'window',
    helper: 'clone'
});
$( "#navbar div.item_list" ).droppable({
    accept: '.explorer_icon',
    hoverClass: 'item_list_hover',
    tolerance: 'pointer',
    drop: function(event, ui) {
    }
});

我正在尝试使用嵌套 UL 和 jqueryUI 可选构建一个两级多选控件。

目前，我将选择限制为子级别，但我真正想要的是能够选择父 LI 并选择其所有子 LI。更进一步，我希望能够选择所有子 LI 并选择其父级。任何少于选定的所有子 LI 的内容都将导致父级 LI 被取消选择。

基本标记：

<ul id="theParentList">
    <li>Parent 1
        <ul>
            <li>Child 1.1</li>
            <li>Child 1.2</li>
        </ul>
    </li>
    <li>Parent 2
        <ul>
            <li>Child 2.1</li>
            <li>Child 2.2</li>
        </ul>
    </li>
</ul>

和当前的 JavaScript：

$('#theParentList').selectable({filter: 'li li'});

我将如何完成第一部分：选择父级会选择其所有子级？

谢谢！

更新：
我现在已经了解了这个概念的大部分内容：
选择父项会选择它的所有子项；
取消选择子项将取消选择其父项

仍然不起作用：选择父级的所有子级应该选择父级

这就是我现在所得到的：

标记：

<ul id="theParentList">
    <li class="level-1">
        <div>Parent 1</div>
        <ul class="level-2">
            <li><div>Child 1.1</div></li>
            <li><div>Child 1.2</div></li>
        </ul>
    </li>
    <li class="level-1"><div>Parent 2</div>
        <ul class="level-2">
            <li><div>Child 2.1</div></li>
            <li><div>Child 2.2</div></li>
        </ul>
    </li>
</ul>

和js：

    function SelectSelectableElement …

使用光标(套索)绘制一个框将.item在此JSFiddle示例中选择多个.

被选中.item的人变成了拖延..slot没有.item内部的空是有效的droppable.

当您在多个droppable上放置多个draggable时,.item如果相应的droppable无效,则只有哪个鼠标处于打开状态才会恢复.

如果删除无效的 droppable,如何使每个 draggable revert ？

使用Javascript:

$(function () {
  // we are going to store the selected objects in here
  var selected = $([]),
    total = [],
    offset = {
        top: 0,
        left: 0
    };

  $(document).selectable({
    filter: ".item",
    start: function (event, ui) { //remove draggable from selection, otherwise previous selection will still be draggable. 
        $(total).draggable("destroy");
    },
    selected: function (event, ui) { // push …

我希望能够更改传递给selectable的start事件的参数,因此我基本上可以允许我的用户使用可选择的jQuery UI效果而无需按住CTRL键.

JS

$(function() {
$( "#selectable" ).bind("mousedown", function(event, ui) {
    var result = $( "#select-result" ).empty();
    event.metaKey = event.ctrlKey = true;
});
$( "#selectable" ).selectable();
});

我有一个小提琴,我想在这里完成的事情:

http://jsfiddle.net/josephbulger/ZfevM/

我遇到的问题是,当我在start方法中设置事件的参数时,stop方法没有看到我正在进行的更改.

有没有办法完成我想要做的事情？

在jquery ui可选小部件中,我注意到你可以通过按住ctrl(或拖动一个框)来选择多个项目,但是如何禁用多重选择.我只希望能够一次选择1个.

谢谢.

我想禁用可选列表的特定元素.我可以禁用整个列表,但是当我尝试使用特定元素时,它不起作用.

$('#disableButton').click(function(){  

    $('#selectable li#b ').selectable('disable');
});

http://jsfiddle.net/Komlan/RYWaZ/1/

这是我的代码

    //reset seats
function resetSelect(){
    var options = { filter: "li.selectable" };
$( "#selectable").selectable(options);               

}
//Ajax get taken seats
$('input[name="choice"]').change(function(){
    resetSelect();
    var sc_id = $('input:radio[name=choice]:checked').val();

    $.ajax({
        url: 'seatings.php',
        data:{ sc_id:sc_id},
        type: "POST",
        dataType:'text',
        success: function(data){
             var id = data.split(",");
             for (var i=0;i<id.length -1;i++){
             alert(id[i]);
                var string = "#"+id[i];
                $(string).css("color","red");
                $('#selectable li'+string).removeClass("selectable ui-selected"); 
             }
                var options = { filter: "li.selectable" };
            $( "#selectable" ).selectable('destroy').selectable(options);                
        }

    }); 
});

总而言之,每次我的单选按钮组发生更改时,我都会获得一系列id并逐个禁用它们.

我已经安装了 jQuery 和 jQuery UI npm。在尝试使用require('jquery-ui/ui/widgets/selectable')我自己的 JS 模块之一时，我收到以下错误消息：

TypeError: base is not a constructor (widget.js:108)

我缺少什么？

在jQuery UI可选演示页面:http://jqueryui.com/demos/selectable/#default选择元素时,可以看到选择框大纲.当我尝试时,怎么会出现这种情况？

这不是我的小提琴,但它也有同样的问题:http: //jsfiddle.net/jMDVm/40/