CODEWITHSUNDEEP
jquery
user362239
user362239

Reputation: 31

Enable Disable JQuery Drag-able

I am working on a print form that will enable Admin user Change the lay out of the print form so i select JQuery Dragable for the job and its working fine but their is one problem when Enable or Disable the first Element in HTML that is dragable take the Disable Style when Dragable is Disabled the other element keep there original look I am using IE 8 . I run the code on Fierfox and Chrome and the result was that all the Element change their style to disable style. I need the Elemnet to Keep there original Stayl

function EnableDragAndDrop(cBox) {
    $("#divDoB").draggable({ disabled: cBox.checked });
    $("#divNationalNo").draggable({ disabled: cBox.checked });
    $("#divSex").draggable({ disabled: cBox.checked });
    $("#divPlaceOfBirth").draggable({ disabled: cBox.checked });
    $("#divIssueDate").draggable({ disabled: cBox.checked });
    $("#divMotherName").draggable({ disabled: cBox.checked });
    $("#divExpDate").draggable({ disabled: cBox.checked });
    $("#divAuthority").draggable({ disabled: cBox.checked });
   $("#divPassportHolderName").draggable({ disabled: cBox.checked });

}

Upvotes: 3

Views: 1739

Answers (2)

user362239
user362239

Reputation: 31

Thanks for all I found the solution when you call $("#divDoB").draggable({ disabled: true }); the JQuery insert a Css class that will set the opacity to.35 and that make the Item look in Disable mode so to keep the Same look and fell in both mode Enable and Disable I just set the Element opacity to 1
thanks for every one :)

Upvotes: 0

Nick Craver
Nick Craver

Reputation: 630349

Instead of using the IDs, if you just gave those same <div> elements a class, like class="draggable" you can make this much shorter, like this:

function EnableDragAndDrop(cBox) {
  $(".draggable").draggable(cBox.checked ? "disable" : "enable");
}
$(function() {
  $(".draggable").draggable({ containment: '#divDragArea', scroll: false });
});

Instead of {disable: boolean} you just need to call the "enable" or "disable" methods, this does that, depending on if the box is checked or not. As a side note, you can place as much as you want inside a single $(function() { }); wrapper, you don't need one for each statement :)

Upvotes: 2

Related Questions