0

Hy all, I am trying to implement drag&drop primefaces components and I want do disable possibility to overlap on component to other before I drop the component. My components looks like this:

<p:outputPanel id="containment" header="Containment" style="color:black;position:relative; top:100px; left:50px; z-index:9" styleClass="button">
                Test
</p:outputPanel>
<p:draggable for="containment" containment="parent" opacity="0.3" grid="10,10"/>

Is there a possibility to inform the user that the component while he is just dragging can't be dropped over another component?. I am using primefaces 5.2

FAndrew
  • 248
  • 4
  • 22
  • There is an attribute in at least PF 5.3 (I think PF 5.2 to) that is called 'stack' (no idea what it actually does, but it might be related) and you can always implement the onDrop handler to check where it is dropped and prevent overlap by moving things around or returning false so it cannot be dropped. Both can be found in the PF docs – Kukeltje Dec 17 '15 at 12:20
  • I need to inform the user before the component is dropped and not after. – FAndrew Dec 17 '15 at 14:34
  • this is the **on**drop not the **after**drop... or do you want some visual indication that it cannot be dropped? Then the only solution is to download the source, check how the jquery droppable is used and override some small javascript kind of like how it would be done with plain jquery... http://stackoverflow.com/questions/11452185/restrict-jquery-draggable-items-from-overlapping-colliding-with-sibling-elements – Kukeltje Dec 17 '15 at 14:47

1 Answers1

0

Thanks @Kukeltje if I do like this 

$("#comp1").draggable({
    obstacle: "#comp2",
    preventCollision: true,
    containment: "#test"
});
FAndrew
  • 248
  • 4
  • 22