Menu
Strangely this is broken only in Firefox and Opera (IE, Chrome and Safari works as it should).
Any suggestions for a quick fix?
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$('#sortable').sortable();
});
</script>
</head>
<body>
<span id="sortable">
<p contenteditable="true">One apple</p>
<p>Two pears</p>
<p>Three oranges</p>
</span>
</body>
</html>
691
I have found another "solution" to this problem.
When declaring your sortable, you should add a cancel: option like this:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$('#sortable').sortable({cancel: ':input,button,.contenteditable'});
});
</script>
</head>
<body>
<span id="sortable">
<p contenteditable="true" class="contenteditable">One apple</p>
<p>Two pears</p>
<p>Three oranges</p>
</span>
</body>
</html>
This version does not force your cursor at the start, but you also can't drag using this field. I'd advice wrapping the <p> in a container which has some sort of dragging handle (like the dots at the start of every row in gmail).
side remark: ':input,button' is required, because that is the default option. If you do not add these, you get similar problems with inputfields and buttons.
119
Yes so for me it was the combination of adding:
cancel: 'input,textarea,button,select,option,[contenteditable]'
and then taking off the .disableSelection();
so i'm left with:
$("#sortable_list").sortable({
cancel: 'input,textarea,button,select,option,[contenteditable]'
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
