Jquery ui Sortable trigger the Toggle event

I have a simple list that I make sortable with Jquery UI.

The content off one (or more) of the items is two divs, one is the title and the other is the content. The title is binded to a toggle event that hides or shows the content.

The problem comes when I drag the item with toogle event, what happens is that the even is triggered and the contents is hide or show.

there is a way to prevent this?

Here is sample of the problem:

$("#list").sortable({
  placeholder: "taskPlaceHolder",
  stop: function(e, ui) {

    //code here
    ui.item.fadeTo(250, 1);
  },
  start: function(e, ui) {

    //code here
    ui.item.fadeTo(250, .5);
  }
}).disableSelection();

$("#title").toggle(

  function() {
    $("#content1").hide(500);
  },
  function() {
    $("#content1").show(500);
  });

body {
  color: white
}

.red {
  background: red;
}

.green {
  background: green;
}

.blue {
  background: blue;
}

.taskPlaceHolder {
  border: 3px dashed yellow;
  background-color: #fff;
  height: 40px;
  padding: 8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.8.14/jquery-ui.min.js" integrity="sha256-8vGrOiH2JPV0k8i9YHEcVFr10iQ53qDbkN4ir8mJFFQ=" crossorigin="anonymous"></script>
<ul id="list">
  <li class="red">
    <div id="title">1 - XXXXXXXX</div>
    <div id="content1">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </li>
  <li class="blue">2 - XXXXXXXX</li>
  <li class="green">3 - XXXXXXXX</li>
开发者_如何转开发</ul>

Drag the item in RED

I figure it out, If someone have the same problem: I'm not 100% clear why, but apparently "FadeTo" somehow reset the element, and that is what triggers the other event.

I hope this help.