CODEWITHSUNDEEP
jqueryjquery-ui
user1912285
user1912285

Reputation: 112

Set draggable items with have the same prefix class name

I have a question in here and know how to select multi class start with "foo-class-", and get 2 ways to do this:

CASE 1: When you have the single class for a element

var $class = $('[class^="foo-class-"]');

CASE 2: When you have multiple classes for a element (Credit to Adeneo)

var $class = $('[class]').filter(function(){
    return (" " + this.className).indexOf(' foo-class-') != -1;
});

But I don't know how to apply this to a accept class draggable in jQueryUI, I also created codes here: http://jsfiddle.net/mQYF4/ but it don't work.

Upvotes: 0

Views: 102

Answers (3)

user23031988
user23031988

Reputation: 330

replase yout z - index: 5 with z - index: 5

doc: http://api.jqueryui.com/draggable/#option-zIndex

Upvotes: 0

Head
Head

Reputation: 568

I'm not exactly sure what you're saying but if you're just trying to make them draggable, here you go:

<div class='draggable'></div>
<div class='draggable'></div>
<div class='draggable'></div>

<script>
$(document).ready(function(){
  $(".draggable").draggable();
});
</script>

http://jsfiddle.net/mQYF4/2/

You need to give them different ids and then select by class. The point of an id is to be distinct, and if there are duplicates jQuery will just select the first one it finds.

Upvotes: 0

Adam Hopkinson
Adam Hopkinson

Reputation: 28795

The problem wasn't with your selector, it was with your use of the z-index property of draggable.

In your jsfiddle, you had 

dra.draggable({
    revert: "invalid",
    containment: "document",
    helper: "clone",
    cursor: "move",
    z - index: 5
});

Change the z-index property to:

"z-index": 5

And this will work - see it in my jsfiddle

Upvotes: 1

Related Questions