[JS/jQuery] Margin van draggable na revert

[TheNephilim]

Ben nu enige tijd bezig met het implementeren van jQuery voor een nieuw project. Geweldig framework dat jQuery, maar er is één ding waar ik niet uit kan komen.

Situatie:

Ik heb 2 divs, 1 met draggables en het andere venster is een droppable. De draggables zijn floating (left) divs van 100px * 80px met een margin van 10. Hij revert terug als er gedropped word op een invalid oppervlak (dus niet in de droppable)

Probleem:

Telkens als ik 1 van de droppables oppak en loslaat boven een invalid gebied, revert hij terug naar de plaats waar hij stond, maar schuift 10 pixels op (de margin). Doe ik dit meerdere malen, dan schuift hij steeds verder naar rechts&beneden.

jQuery: jquery-1.4.min.js
jQuery-UI: jquery-ui-1.7.2.custom.min.js

Het zou mooi wezen als iemand hier een oplossing voor heeft! Het is misschien niet echt een groot probleem, maar wel storend.

Alvast bedankt!

JavaScript:

$(".draggable").draggable({
  revert: 'invalid',
  containment: '#content',
  activeClass: 'ui-state-hover',
  hoverClass: 'ui-state-active'
});

$("#your_offer").droppable({
  activate: function(event, ui) {
    $(this).css('background-color','silver');
  },
  deactivate: function(event, ui) {
    $(this).css('background-color','transparent');
  },
  drop: function(event, ui) {
    $('#content').load('load.php?p=trade', { action: 'add_item', item_id: $(ui.draggable).attr('id') });
  }
});

[ Voor 22% gewijzigd door TheNephilim op 20-01-2010 20:14 ]

[PeterSelie]

Met het ontbreken van een online voorbeeld is het een beetje koffiedik kijken, of niet?

[TheNephilim]

SoaDmaggot schreef op woensdag 20 januari 2010 @ 19:59:
Met het ontbreken van een online voorbeeld is het een beetje koffiedik kijken, of niet?

Nouja, ik kan me voorstellen dat het gewoon een optie is in jQuery->Draggables. Heb er nu het jquery gedeelte in gezet. De rest van de code neerplempen heeft weinig zin denk ik.

[PeterSelie]

Klopt, een online voorbeeld doet echter vaak al wonderen. Kunnen we zelf ook even testen en debuggen

[bindsa]

Probeer eens een DIV om de andere DIV heen te doen, die DIV die je erom heen doet geef je dan een afstand van 10px tot de linkerzijkant en bij de andere DIV haal je dan die margin weg. Zou volgens mij moeten werken dan.

[TheNephilim]

Probleem op weten te lossen met onderstaande code, werkt perfect nu

Alsnog bedankt!

JavaScript:

$(".draggable").draggable({
  revert: 'invalid',
  helper: 'clone',
  containment: '#content',
  activeClass: 'ui-state-hover',
  hoverClass: 'ui-state-active',
  start: function (event, ui) {
    $(this).hide();
  },
  stop: function (event, ui) {
    $(this).show();
  }
});

$("#your_offer").droppable({
  activate: function(event, ui) {
    $(this).css('background-color','silver');
  },
  deactivate: function(event, ui) {
    $(this).css('background-color','transparent');
  },
  drop: function(event, ui) {
    ui.draggable.appendTo($(this)).show().css({ position: 'relative', left: 0 });
    ui.helper.remove();
    $('#content').load('load.php?p=trade', { action: 'add_item', item_id: $(ui.draggable).attr('id') });
  }
});

Hier mag een slotje op