Javascript jQueryUI：一个对象可以同时被选择和拖动吗？_Javascript_Jquery_Jquery Ui

Javascript jQueryUI：一个对象可以同时被选择和拖动吗？

javascript jquery jquery-ui

Javascript jQueryUI：一个对象可以同时被选择和拖动吗？,javascript,jquery,jquery-ui,Javascript,Jquery,Jquery Ui,我有我想要既可拖动又可选择的对象。这可能吗 var course_li = $(sprintf('<li class="course%s">%s</li>', already_scheduled_class, course["fields"]["name"])); // ... course_li.draggable(DRAGGABLE_COURSE_SETTINGS); // ... if (in_course) { course_li.dragga

我有我想要既可拖动又可选择的对象。这可能吗

var course_li = $(sprintf('<li class="course%s">%s</li>', already_scheduled_class, course["fields"]["name"]));

// ...

course_li.draggable(DRAGGABLE_COURSE_SETTINGS);

// ...

if (in_course) {
      course_li.draggable('disable');
}   

// ...

$(".course").selectable(); // fail

这发生在jQuery.js（1.4.2）的第4691行：

我在这里做错了什么，或者可选和可拖动只是不兼容吗？

我无法使元素既可

可选

又可

可拖动

，但很容易就有一个可拖动的父容器div，以及一个可选择的子无序列表（

）。以下是我的代码（已测试）：


塞尔先生
{
填充：20px；
边框：实心1px#000；
列表样式类型：无；
背景色：#C0；
宽度：90%；
左边距：自动；
右边距：自动；
}
.sel.ui选择{背景：#FECA40；}
.sel.ui选择{背景：#F39814；颜色：#fff；}
.sel li{边距：3px；填充：0.4em；字体大小：1.4em；高度：18px；}
拖曳
{
利润率：10px；
边框：实心1px#f00；
背景色：#333；
颜色：#fff；
}
$（文档）.ready（函数（）
{
$（“.sel”）.selective（）；
$（“.drag”）.draggable（）；
});
拖我

项目1
项目2
项目3
项目4

我无法使元素既可以

选择

又可以

拖动

，但有一个可拖动的父容器div和一个可选择的子无序列表（

）就足够容易了。以下是我的代码（已测试）：


塞尔先生
{
填充：20px；
边框：实心1px#000；
列表样式类型：无；
背景色：#C0；
宽度：90%；
左边距：自动；
右边距：自动；
}
.sel.ui选择{背景：#FECA40；}
.sel.ui选择{背景：#F39814；颜色：#fff；}
.sel li{边距：3px；填充：0.4em；字体大小：1.4em；高度：18px；}
拖曳
{
利润率：10px；
边框：实心1px#f00；
背景色：#333；
颜色：#fff；
}
$（文档）.ready（函数（）
{
$（“.sel”）.selective（）；
$（“.drag”）.draggable（）；
});
拖我

项目1
项目2
项目3
项目4

一个

可选择的元素是否必须是一个列表，其中列表元素是被选择的元素？不，您可以有一个..
并执行$（“.sel”）。可选择（{filter:“tr”}），这将使您个人的选项可供选择。在为selectible（）
提供选项时，您似乎可以为过滤器
属性使用任何有效的jquery选择器。所以你可以使用跨距，div等等。只需将元素与filter
匹配即可。selective
元素是否必须是列表元素，其中列表元素就是所选的元素？不，您可以有..
并执行$（.sel”）。可选（{filter:“tr”}），这将使您个人的选项可供选择。在为selectible（）
提供选项时，您似乎可以为过滤器
属性使用任何有效的jquery选择器。所以你可以使用跨距，div等等。只需将元素与过滤器匹配即可。
elem.ownerDocument is null

var defaultView = elem.ownerDocument.defaultView; 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/ui-lightness/jquery-ui.css" />

    <style type="text/css">
        .sel
        {
            padding: 20px;
            border: solid 1px #000;
            list-style-type: none;
            background-color: #c0c0c0;
            width: 90%;
            margin-left: auto;
            margin-right: auto;
        }

        .sel .ui-selecting { background: #FECA40; }
        .sel .ui-selected { background: #F39814; color: #fff; }
        .sel li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }

        .drag
        {
            margin: 10px;
            border: solid 1px #f00;
            background-color: #333;
            color: #fff;
        }
    </style>

    <script type="text/javascript">
        $(document).ready(function()
        {
            $(".sel").selectable();
            $(".drag").draggable();
        });
    </script>
</head>

<body>
    <div class="drag">
        Drag me
        <ul class="sel">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
        </ul>
    </div>
</body>
</html>