CODEWITHSUNDEEP
javascriptjquerydraggable
KvdB
KvdB

Reputation: 19

How to check if element being dragged has a certain class?

How can I check if a certain element being dragged has a certain class?

The JS code:

if ($('.fc-event').is('.ui-draggable')) //To check if element is being dragged
{
    console.log('This element is being dragged');
    if ($('.fc-event').is('.ui-draggable').hasClass('music')) //Can't use this.hasClass?
    {
        //place in music database table
    }
    else
    {
        //place in other database table
    }
}

The HTML code:

<div id='external-events'>
    <h4>Music</h4>
    <div class='fc-event music'>Music 1</div>
    <div class='fc-event music'>Music 2</div>
    <div class='fc-event music'>Music 3</div>
</div>

The above JS code obviously does not work, but it's the closest to the solution. (I think)

Upvotes: 1

Views: 1302

Answers (1)

Jai
Jai

Reputation: 74738

There are some events in draggable() api, there is one said drag which fires when you drag it and this callback has two arguments event, ui where ui will get you the element you are looking for.

$( ".selector" ).draggable({
  drag: function( event, ui ) {
    $('pre').html('$(ui.helper).hasClass("music"):'+$(ui.helper).hasClass('music'));
  }
});
.selector{width:150px; height:100px; border:solid 1px red; background:yellow;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div class='selector music'>selector</div>

<pre></pre>

Upvotes: 1

Related Questions