CODEWITHSUNDEEP
jqueryjquery-ui
Milind Anantwar
Milind Anantwar

Reputation: 82241

Hide Hover content on jquery draggable element

I have jquery draggable element whose DOM is:

<li class="smartobjects ui-draggable">
<a href="#">sdasd</a>
<div class="popup" style="display: none;">
  <div class="content-heading">sdasd</div>
  <div class="content"><p>null</p></div>
</div>
</li>

On hover of smartobject, i am displaying its child div having class popup.The problem is,i need to hide this hover div when i drag and drop parent li element. I tried using start and drag event in draggable handle to hide inner popup div. Did not worked though.

Here is the handler:

$('.smartobjects').draggable({ containment: "#tblEmailContainer", scroll: false, opacity: 0.7, helper: "clone" });/*mark the smart object as draggable*/

Any help would be appreciated.

Link To Fiddle

Upvotes: 0

Views: 424

Answers (1)

omma2289
omma2289

Reputation: 54629

Use the start event to hide the popup:

/*mark the smart object as draggable*/
$('.smartobjects').draggable({ 
    containment: "#tblEmailContainer", 
    scroll: false, 
    opacity: 0.7, 
    helper: "clone",
    start: function( event, ui ) {
        ui.helper.find('.popup').hide();
    } 
});

Updated fiddle

Upvotes: 1

Related Questions