ansaurus

Question

jQuery UI: Can an object be selectable and draggable simultaneously?

Answer 1

A:

I wasn't able to get elements to be both selectable and draggable, but it was easy enough to have a parent container div that's draggable, with a child unordered list (<ul>) that's selectable. Here's my code (tested):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; 
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"&gt;&lt;/script&gt;
    <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>

Samuel Meacham 2010-07-15 04:51:32

Does a `selectable` element have to be a list where the list elements are what gets selected?

Rosarch 2010-07-15 05:02:45

No, you could have a `<table class="sel">...</table>` and do `$(".sel").selectable({ filter: "tr" });`, and that would make your individual <tr>'s selectable.

Samuel Meacham 2010-07-15 05:14:05

It appears you can use any valid jquery selector for the `filter` property when providing your options for `selectable()`. So you could use spans, divs, whatever. Just match the elements with `filter`.

Samuel Meacham 2010-07-15 05:16:43

ansaurus

tags:

views:

answers:

jQuery UI: Can an object be selectable and draggable simultaneously?

related questions