Re: Draggable multiple containment
Hello Sebastien, I finally was able to get back to this task : Thanks a lot for the pointer! it turns out I have already implemented "revert" function, but completely forgot about it :( now everything works as expected Thanks! On Fri, Jun 3, 2016 at 6:06 PM, Sebastien wrote: > Hi Maxim, > > After a quick test, 'revert' and 'accept' are enough (and convenient if you > have a css class for 'file'). But using 'scope' instead of 'accept' also > works, it's up to you... > I also confirm you that revert does not prevent #onDrop to be fired (even > used as a function)... > > For instance: > > - the droppable > > private Droppable newDroppable(String id, String color, final > String scope) > { > return new Droppable(id, Model.of(color)) { > > @Override > public void onConfigure(JQueryBehavior behavior) > { > super.onConfigure(behavior); > > // behavior.setOption("scope", Options.asString(scope)); > behavior.setOption("accept", Options.asString("." + > scope)); // css class > } > } > > - the draggable > > private static Draggable newDraggable(String id, String label, > final String scope) > { > return new Draggable(id, Model.of(label)) { > > @Override > public void onConfigure(JQueryBehavior behavior) > { > super.onConfigure(behavior); > > // behavior.setOption("scope", Options.asString(scope)); > behavior.setOption("revert", true); // or: > // behavior.setOption("revert", "function(e) { > // console.log('e', e); // e stands for the droppable > // console.log('this', this); // this stands for the > draggable > // if (this.hasClass('file')) { return true; } }"); // true > means "do revert" > } > }; > } > > - html > > < div wicket:id="draggable1" class="file"> > my file > < /div> > < div wicket:id="draggable2" class="folder"> > my folder > < /div> > > > Hope this helps, > Sebastien > > > On Fri, Jun 3, 2016 at 10:03 AM, Maxim Solodovnik > wrote: > > > Thanks a lot! > > I'll be on vacation next couple of week, will try to test on return :) > > > -- WBR Maxim aka solomax
Re: Draggable multiple containment
Hi Maxim, After a quick test, 'revert' and 'accept' are enough (and convenient if you have a css class for 'file'). But using 'scope' instead of 'accept' also works, it's up to you... I also confirm you that revert does not prevent #onDrop to be fired (even used as a function)... For instance: - the droppable private Droppable newDroppable(String id, String color, final String scope) { return new Droppable(id, Model.of(color)) { @Override public void onConfigure(JQueryBehavior behavior) { super.onConfigure(behavior); // behavior.setOption("scope", Options.asString(scope)); behavior.setOption("accept", Options.asString("." + scope)); // css class } } - the draggable private static Draggable newDraggable(String id, String label, final String scope) { return new Draggable(id, Model.of(label)) { @Override public void onConfigure(JQueryBehavior behavior) { super.onConfigure(behavior); // behavior.setOption("scope", Options.asString(scope)); behavior.setOption("revert", true); // or: // behavior.setOption("revert", "function(e) { // console.log('e', e); // e stands for the droppable // console.log('this', this); // this stands for the draggable // if (this.hasClass('file')) { return true; } }"); // true means "do revert" } }; } - html < div wicket:id="draggable1" class="file"> my file < /div> < div wicket:id="draggable2" class="folder"> my folder < /div> Hope this helps, Sebastien On Fri, Jun 3, 2016 at 10:03 AM, Maxim Solodovnik wrote: > Thanks a lot! > I'll be on vacation next couple of week, will try to test on return :) >
Re: Draggable multiple containment
Thanks a lot! I'll be on vacation next couple of week, will try to test on return :) On Wed, Jun 1, 2016 at 3:05 AM, Sebastien wrote: > Hi Maxim, > > It should be achievable, using revert and accept/scope > By reading your post, I suddently have a doubt, revert is not supposed to > cancel the drop action. The element just go back to its original place but > onDrop should still be fired. I have to double check tomorrow because > implementing revert as a function seems to cancel drop event... weird (or i > didn't paid attention) > On May 31, 2016 19:34, "Maxim Solodovnik" wrote: > > > Hello Sebastien > > > > thanks for the reply :) > > I'll try to describe my use case > > > > I do have file free panel, file/folder items on this panel can be *moved* > > to other folders (there are unmovable root folders and trash) > > everything works as expected > > > > now I need to add "display" panel > > > > I would like "file" item can be dropped to this panel BUT visually it > > should *revert* to original place, but need to be processed by drop > target. > > So I cannot set revert option on draggable (files need to be able to be > > moved) > > I need to process file in onDrop method, then "visually revert it to the > > original position" > > is it too much? :))) > > > > On Tue, May 31, 2016 at 6:06 PM, Sebastien wrote: > > > > > Hi Maxim, > > > > > > Sorry for the late answer! > > > > > > "Droppable#onDrop, where you can reject the Draggable item/component" > was > > > actually misleading. > > > IIRC it was supposed to mean "if the element is not reverted, then it > is > > > accepted ; and if the element is reverted then it is rejected by > design" > > > > > > The most important question to me is: do you know in advance what > element > > > can be accepted or not ? (meaning can you recognized them with a > special > > > css class for instance or any data-* attribute?) > > > > > > 1/ In case of yes, please consider these droppable option (it can > replace > > > my previous draggable code snippet) > > > http://api.jqueryui.com/droppable/#option-accept > > > http://api.jqueryui.com/droppable/#option-scope > > > > > > 2/ in case of no... then consider case 1/ ;) > > > > > > In you need additional help on this, please describe a simple/concrete > > > usecase so I can test further :) > > > > > > Best regards, > > > Sebastien. > > > > > > > > > On Thu, May 26, 2016 at 7:27 PM, Maxim Solodovnik < > solomax...@gmail.com> > > > wrote: > > > > > > > Hello Sebastien, > > > > finally I found free time to continue this work :) > > > > > > > > Actually my question was regarding "Droppable#onDrop, where you can > > > reject > > > > the Draggable item/component", how this can be achieved? > > > > > > > > > > > > > > > -- > > WBR > > Maxim aka solomax > > > -- WBR Maxim aka solomax
Re: Draggable multiple containment
Hi Maxim, It should be achievable, using revert and accept/scope By reading your post, I suddently have a doubt, revert is not supposed to cancel the drop action. The element just go back to its original place but onDrop should still be fired. I have to double check tomorrow because implementing revert as a function seems to cancel drop event... weird (or i didn't paid attention) On May 31, 2016 19:34, "Maxim Solodovnik" wrote: > Hello Sebastien > > thanks for the reply :) > I'll try to describe my use case > > I do have file free panel, file/folder items on this panel can be *moved* > to other folders (there are unmovable root folders and trash) > everything works as expected > > now I need to add "display" panel > > I would like "file" item can be dropped to this panel BUT visually it > should *revert* to original place, but need to be processed by drop target. > So I cannot set revert option on draggable (files need to be able to be > moved) > I need to process file in onDrop method, then "visually revert it to the > original position" > is it too much? :))) > > On Tue, May 31, 2016 at 6:06 PM, Sebastien wrote: > > > Hi Maxim, > > > > Sorry for the late answer! > > > > "Droppable#onDrop, where you can reject the Draggable item/component" was > > actually misleading. > > IIRC it was supposed to mean "if the element is not reverted, then it is > > accepted ; and if the element is reverted then it is rejected by design" > > > > The most important question to me is: do you know in advance what element > > can be accepted or not ? (meaning can you recognized them with a special > > css class for instance or any data-* attribute?) > > > > 1/ In case of yes, please consider these droppable option (it can replace > > my previous draggable code snippet) > > http://api.jqueryui.com/droppable/#option-accept > > http://api.jqueryui.com/droppable/#option-scope > > > > 2/ in case of no... then consider case 1/ ;) > > > > In you need additional help on this, please describe a simple/concrete > > usecase so I can test further :) > > > > Best regards, > > Sebastien. > > > > > > On Thu, May 26, 2016 at 7:27 PM, Maxim Solodovnik > > wrote: > > > > > Hello Sebastien, > > > finally I found free time to continue this work :) > > > > > > Actually my question was regarding "Droppable#onDrop, where you can > > reject > > > the Draggable item/component", how this can be achieved? > > > > > > > > > -- > WBR > Maxim aka solomax >
Re: Draggable multiple containment
Hello Sebastien thanks for the reply :) I'll try to describe my use case I do have file free panel, file/folder items on this panel can be *moved* to other folders (there are unmovable root folders and trash) everything works as expected now I need to add "display" panel I would like "file" item can be dropped to this panel BUT visually it should *revert* to original place, but need to be processed by drop target. So I cannot set revert option on draggable (files need to be able to be moved) I need to process file in onDrop method, then "visually revert it to the original position" is it too much? :))) On Tue, May 31, 2016 at 6:06 PM, Sebastien wrote: > Hi Maxim, > > Sorry for the late answer! > > "Droppable#onDrop, where you can reject the Draggable item/component" was > actually misleading. > IIRC it was supposed to mean "if the element is not reverted, then it is > accepted ; and if the element is reverted then it is rejected by design" > > The most important question to me is: do you know in advance what element > can be accepted or not ? (meaning can you recognized them with a special > css class for instance or any data-* attribute?) > > 1/ In case of yes, please consider these droppable option (it can replace > my previous draggable code snippet) > http://api.jqueryui.com/droppable/#option-accept > http://api.jqueryui.com/droppable/#option-scope > > 2/ in case of no... then consider case 1/ ;) > > In you need additional help on this, please describe a simple/concrete > usecase so I can test further :) > > Best regards, > Sebastien. > > > On Thu, May 26, 2016 at 7:27 PM, Maxim Solodovnik > wrote: > > > Hello Sebastien, > > finally I found free time to continue this work :) > > > > Actually my question was regarding "Droppable#onDrop, where you can > reject > > the Draggable item/component", how this can be achieved? > > > -- WBR Maxim aka solomax
Re: Draggable multiple containment
Hi Maxim, Sorry for the late answer! "Droppable#onDrop, where you can reject the Draggable item/component" was actually misleading. IIRC it was supposed to mean "if the element is not reverted, then it is accepted ; and if the element is reverted then it is rejected by design" The most important question to me is: do you know in advance what element can be accepted or not ? (meaning can you recognized them with a special css class for instance or any data-* attribute?) 1/ In case of yes, please consider these droppable option (it can replace my previous draggable code snippet) http://api.jqueryui.com/droppable/#option-accept http://api.jqueryui.com/droppable/#option-scope 2/ in case of no... then consider case 1/ ;) In you need additional help on this, please describe a simple/concrete usecase so I can test further :) Best regards, Sebastien. On Thu, May 26, 2016 at 7:27 PM, Maxim Solodovnik wrote: > Hello Sebastien, > finally I found free time to continue this work :) > > Actually my question was regarding "Droppable#onDrop, where you can reject > the Draggable item/component", how this can be achieved? >
Re: Draggable multiple containment
Hello Sebastien, finally I found free time to continue this work :) Actually my question was regarding "Droppable#onDrop, where you can reject the Draggable item/component", how this can be achieved? On Wed, May 4, 2016 at 1:28 AM, Sebastien wrote: > Hi Maxim, > > "revert" options can take a function as argument [1]. maybe you can use it > and test for an additional css class? > I did a quick test and it works as expected: > > MyDraggable { > > @Override > public void onConfigure(JQueryBehavior behavior) > { > super.onConfigure(behavior); > > behavior.setOption("revert", "function(e) { console.log('e', e); if > (e.hasClass('green')) { return true; } }"); // true means "do revert" > } > } > > In conjunction to Droppable#onDrop, where you can reject the Draggable > item/component if is not on the correct Droppable > > Hope this helps, > Sebastien > > [1] https://api.jqueryui.com/draggable/#option-revert > -- WBR Maxim aka solomax
Re: Draggable multiple containment
Hi Maxim, "revert" options can take a function as argument [1]. maybe you can use it and test for an additional css class? I did a quick test and it works as expected: MyDraggable { @Override public void onConfigure(JQueryBehavior behavior) { super.onConfigure(behavior); behavior.setOption("revert", "function(e) { console.log('e', e); if (e.hasClass('green')) { return true; } }"); // true means "do revert" } } In conjunction to Droppable#onDrop, where you can reject the Draggable item/component if is not on the correct Droppable Hope this helps, Sebastien [1] https://api.jqueryui.com/draggable/#option-revert
Re: Draggable multiple containment
Hi Maxim, I actually need to make a poc before giving an answer. Will try to do it asap... Thanks & best regards, Sebastien. On Wed, Apr 27, 2016 at 9:12 AM, Maxim Solodovnik wrote: > Ok > > Another question: > Currently Draggable has "revert" option > Is it possible to check item being dropped inside Droppable::onDrop and > "reject" it, so it will revert? > > It is not an option for me to setRevert(true), due to I need to perform > some checks depending on where the item was dropped :) > >
Re: Draggable multiple containment
Ok Another question: Currently Draggable has "revert" option Is it possible to check item being dropped inside Droppable::onDrop and "reject" it, so it will revert? It is not an option for me to setRevert(true), due to I need to perform some checks depending on where the item was dropped :) On Wed, Apr 27, 2016 at 1:06 PM, Sebastien wrote: > Hi Maxim, > > > On Wed, Apr 27, 2016 at 6:38 AM, Maxim Solodovnik > wrote: > > > Hello Sebastien, > > > > It's about jqueryui draggable. > > According to my tests it only works on first element being selected by > > selector provided i.e. in case two elements on the page has class="drop > > target", only one will work as containment > > > > Right, this seems to be by design > > *Selector*: The draggable element will be contained to the bounding box of > the first element found by the selector. If no element is found, no > containment will be set. > > > > > > setting containment to empty string helps, but > > > > I'm afraid you should try to have a more generic/large containment... > If should show me some code or example I may be more inspired ! :) > > > > > > On Wed, Apr 27, 2016 at 3:15 AM, Sebastien wrote: > > > > > Hi Maxim, > > > > > > Is it about jQuery or Kendo draggable? > > > > > > Sebastien. > > > > > > On Tue, Apr 26, 2016 at 7:06 PM, Maxim Solodovnik < > solomax...@gmail.com> > > > wrote: > > > > > > > Hello Sebastien, > > > > > > > > I'm trying to use Draggable, > > > > everything works as expected as long as I'm using single selector for > > the > > > > "containment" (for ex: ".drop.target" or ".drop.target1") > > > > > > > > but fails if I'm using both ".drop.target, .drop.target1" > > > > Maybe you know are there any limitations? > > > > > > > > > > > > -- > > > > WBR > > > > Maxim aka solomax > > > > > > > > > > > > > > > -- > > WBR > > Maxim aka solomax > > > -- WBR Maxim aka solomax
Re: Draggable multiple containment
Hi Maxim, On Wed, Apr 27, 2016 at 6:38 AM, Maxim Solodovnik wrote: > Hello Sebastien, > > It's about jqueryui draggable. > According to my tests it only works on first element being selected by > selector provided i.e. in case two elements on the page has class="drop > target", only one will work as containment > Right, this seems to be by design *Selector*: The draggable element will be contained to the bounding box of the first element found by the selector. If no element is found, no containment will be set. > > setting containment to empty string helps, but > I'm afraid you should try to have a more generic/large containment... If should show me some code or example I may be more inspired ! :) > > On Wed, Apr 27, 2016 at 3:15 AM, Sebastien wrote: > > > Hi Maxim, > > > > Is it about jQuery or Kendo draggable? > > > > Sebastien. > > > > On Tue, Apr 26, 2016 at 7:06 PM, Maxim Solodovnik > > wrote: > > > > > Hello Sebastien, > > > > > > I'm trying to use Draggable, > > > everything works as expected as long as I'm using single selector for > the > > > "containment" (for ex: ".drop.target" or ".drop.target1") > > > > > > but fails if I'm using both ".drop.target, .drop.target1" > > > Maybe you know are there any limitations? > > > > > > > > > -- > > > WBR > > > Maxim aka solomax > > > > > > > > > -- > WBR > Maxim aka solomax >
Re: Draggable multiple containment
Hello Sebastien, It's about jqueryui draggable. According to my tests it only works on first element being selected by selector provided i.e. in case two elements on the page has class="drop target", only one will work as containment setting containment to empty string helps, but On Wed, Apr 27, 2016 at 3:15 AM, Sebastien wrote: > Hi Maxim, > > Is it about jQuery or Kendo draggable? > > Sebastien. > > On Tue, Apr 26, 2016 at 7:06 PM, Maxim Solodovnik > wrote: > > > Hello Sebastien, > > > > I'm trying to use Draggable, > > everything works as expected as long as I'm using single selector for the > > "containment" (for ex: ".drop.target" or ".drop.target1") > > > > but fails if I'm using both ".drop.target, .drop.target1" > > Maybe you know are there any limitations? > > > > > > -- > > WBR > > Maxim aka solomax > > > -- WBR Maxim aka solomax
Re: Draggable multiple containment
Hi Maxim, Is it about jQuery or Kendo draggable? Sebastien. On Tue, Apr 26, 2016 at 7:06 PM, Maxim Solodovnik wrote: > Hello Sebastien, > > I'm trying to use Draggable, > everything works as expected as long as I'm using single selector for the > "containment" (for ex: ".drop.target" or ".drop.target1") > > but fails if I'm using both ".drop.target, .drop.target1" > Maybe you know are there any limitations? > > > -- > WBR > Maxim aka solomax >