CODEWITHSUNDEEP
jquerydrag-and-dropjquery-ui-draggable
Jason
Jason

Reputation: 11363

Removing draggable properties

I have a set of images that have draggable=true setting. These images are intended to be dragged then dropped onto a google map view and create a marker at the drop location. To prevent duplicate images on the map, I'd like to disable the draggable setting and alter the opacity.

My map droppable and photo draggable handlers are

$("#photo"+i).draggable({
  helper: "clone",
  cursor: "move",
  containment:  'body',
  start: function(e){
    $(this).addClass("fade");
    currentPhoto = $(this);   
  }
});

$("#map").droppable({
  drop: function(e){
    var point = new google.maps.Point(e.pageX, e.pageY);
    var data = {
      "location": overlay.getProjection().fromDivPixelToLatLng(point),
      "photo": currentPhoto
    }

    makeMarkers(data.location, $(data.photo).attr("src"), $(data.photo).attr('id'));
  }
});

Inside makeMarkers, the type value is used to determine if the markers are being created on page load from database retrieval values or as the ID of the photo image being dragged.

function makeMarkers(location, title, type){
   //variable and marker initialization here    

  if (type == "onload")
    newMarker.setIcon(savedLocation);
  else {
    newMarker.setIcon(unsavedLocation);
    $("img."+type).attr("draggable", "false");
    $("img."+type).attr("opacity", "0.5");
    console.log("Disabling draggability of " +type);
  }

   //marker event handlers here
}

I can drag and drop the image and a new marker is created at the location. However, the image properties are unchanged. How can I enable the ability

Upvotes: 2

Views: 1006

Answers (1)

gcochard
gcochard

Reputation: 11744

You should be using .removeAttr() instead of .attr().

This code should do the trick:

function makeMarkers(location, title, type){
   //variable and marker initialization here    

  if (type == "onload")
    newMarker.setIcon(savedLocation);
  else {
    newMarker.setIcon(unsavedLocation);
    $("img."+type).removeAttr("draggable");
    $("img."+type).attr("opacity", "0.5");
    console.log("Disabling draggability of " +type);
  }

   //marker event handlers here
}

Upvotes: 4

Related Questions