Jquery ui Sortable 触发 Toggle 事件

Question

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

Answer 1

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.