Here are two work-arounds:
1. Tell your sortable to not allow sorting when your drag starts on a slider
via the cancel option:
$("#sortable").sortable({
revert: true,
axis: 'y',
distance: 10,
cancel: '.ui-slider'
});
Docs: http://docs.jquery.com/UI/Sortable#option-cancel
2. Tell your slider not to allow the mousedown to bubble via the start event
callback:
$('#slider1, #slider2, #slider3').slider({
range: false,
min: 0,
max: 100,
value: 100,
start: function(event, ui) { event.stopPropagation(); }
});
Docs: http://docs.jquery.com/UI/Slider#event-start
- Richard
On Sat, Mar 7, 2009 at 12:54 PM, MikeS <[email protected]> wrote:
>
> I have a set of sortable divs that are constrained to sort vertically
> (axis: 'y') where each contains a horizontal slider. A problem I
> found with IE 6 is that if I drag the slider handle, IE thinks I'm
> trying to drag the whole sortable div AND the slider handle.
>
> This is using jQuery 1.3.2 with jQueryUI 1.7. Safari and Firefox
> behave as expected where if a drag on the slider handle starts, the
> drag is not simultaneously sent to the sortable div.
>
> Can anyone help with a workaround or point out something I'm doing
> wrong?
>
> Thanks.
>
>
> Example code:
>
> <code>
> <html>
> <head>
> <link type="text/css" href="css/custom-theme/jquery-ui-1.7.custom.css"
> rel="stylesheet" />
> <style type="text/css">
> .palette ul { list-style-type: none; margin: 0; padding: 0; margin-
> bottom: 10px; }
> .palette li { margin: 5px; padding: 5px; width: 175px; }
> </style>
>
> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
> <script type="text/javascript" src="js/jquery-ui-1.7.custom.min.js"></
> script>
> <script type="text/javascript">
> $(function(){
> // Dialog
> $('#dialog').dialog({
> autoOpen: true,
> width: 225,
> resizable: false,
> position: ['left','top']
> });
>
> $("#sortable").sortable({
> revert: true,
> axis: 'y'
> });
> $("ul, li").disableSelection();
>
> $('#slider1').slider({
> range: false,
> min: 0,
> max: 100,
> value: 100
> });
>
> $('#slider2').slider({
> range: false,
> min: 0,
> max: 100,
> value: 100
> });
>
> $('#slider3').slider({
> range: false,
> min: 0,
> max: 100,
> value: 100
> });
> });
> </script>
> </head>
> <body style="font-size:10;">
> <div id="dialog" class="palette">
> <ul id="sortable">
> <li class="ui-state-default">Item 1<br><div id="slider1"
> style="width:150;"></div></li>
> <li class="ui-state-default">Item 2<br><div id="slider2"
> style="width:150;"></div></li>
> <li class="ui-state-default">Item 3<br><div id="slider3"
> style="width:150;"></div></li>
> </ul>
> </div>
> </body>
> </html>
>
> </code>
>
> >
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
