views:

65

answers:

2

If I do "jquery sortable" on a contenteditable items, the item would never be editable.

I should mention that in IE every thing works fine and i have this problem in FF 3.6.8

<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">test</p>
  </span>
</body>
</html>
+2  A: 

Perhaps use a handle?

<div id="sortable">
    <div>
        <span class="handle">Perhaps some icon here</span>
        <p contenteditable="true">Editable text..</p>
    </div>
    <div>
        <span class="handle">Perhaps some icon here</span>
        <p contenteditable="true">Editable text..</p>
    </div>
</div>


$("#sortable").sortable({
    handle: 'span'
});

P.S. You shouldn't nest <p> tags inside <span>'s :)

Marko
but by using handle: 'span', the container is not sortable anymore!
adrakadabra
A: 

but by using handle: 'span', the container is not sortable anymore!

adrakadabra
Well you're doing something wrong then, the handle is the element that you need to click in order to drag!
Marko