Turning off draggable
I'm currently trying to create a desktop like homepage where using can move around panels. I've initialized these panels as draggable items in jQuery but I want them to only be draggable when in "edit mode" which is a flag I keep track of.
Since I can't seem to figure out how to turn off draggrable items (disable isn't what I'm looking for, disable seems to disable the whole element) I just add and remove a class named ".on" which is used as the handle. Thing is, when I remove ".on" the whole element becomes the handle which kind of defeats the purpose of not being in edit mode :) The oddest thing is that this method worked perfectly when I used sortable items instead of draggable.
And here's my javascript
var edit_mode = false;
$(document).ready(function() {
$('.widget_panel').draggable(
{
handle: '.handle.on',
stack: {
group: '.widget_panel',
min: 10
},
scroll: false
}).disableSelectio开发者_如何学Cn();
$('#test').click(function()
{
edit_mode = !edit_mode;
if(edit_mode)
{
$('.handle').addClass('on');
}
else
{
$('.handle').removeClass('on');
}
});
});
and my HTML
<ul class="widgets">
<li id="1" class="widget_panel">
<div class="widget_content">
<h3 class="handle">Widget Title</h3>
</div>
</li>
</ul>
<input id="test" type="button" value="test" />
So any tips on how I could achieve this? Any help is appreciated :)
Forget about your extra class. Do it this way:
if(edit_mode) {
$('.widget_panel').draggable('option', 'cancel', '');
} else {
$('.widget_panel').draggable('option', 'cancel', '.handle');
}
精彩评论