You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by Maxim Solodovnik <so...@gmail.com> on 2016/04/26 19:06:35 UTC
Draggable multiple containment
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
Re: Draggable multiple containment
Posted by Maxim Solodovnik <so...@gmail.com>.
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 <se...@gmail.com> 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<String> newDroppable(String id, String color, final
> String scope)
> {
> return new Droppable<String>(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<String> newDraggable(String id, String label,
> final String scope)
> {
> return new Draggable<String>(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 <so...@gmail.com>
> 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
Posted by Sebastien <se...@gmail.com>.
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<String> newDroppable(String id, String color, final
String scope)
{
return new Droppable<String>(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<String> newDraggable(String id, String label,
final String scope)
{
return new Draggable<String>(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 <so...@gmail.com>
wrote:
> Thanks a lot!
> I'll be on vacation next couple of week, will try to test on return :)
>
Re: Draggable multiple containment
Posted by Maxim Solodovnik <so...@gmail.com>.
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 <se...@gmail.com> 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" <so...@gmail.com> 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 <se...@gmail.com> 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 <
> solomax666@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
Posted by Sebastien <se...@gmail.com>.
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" <so...@gmail.com> 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 <se...@gmail.com> 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 <so...@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
>
Re: Draggable multiple containment
Posted by Maxim Solodovnik <so...@gmail.com>.
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 <se...@gmail.com> 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 <so...@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
Re: Draggable multiple containment
Posted by Sebastien <se...@gmail.com>.
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 <so...@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?
>
Re: Draggable multiple containment
Posted by Maxim Solodovnik <so...@gmail.com>.
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 <se...@gmail.com> 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
Posted by Sebastien <se...@gmail.com>.
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
Posted by Sebastien <se...@gmail.com>.
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 <so...@gmail.com>
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
Posted by Maxim Solodovnik <so...@gmail.com>.
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 <se...@gmail.com> wrote:
> Hi Maxim,
>
>
> On Wed, Apr 27, 2016 at 6:38 AM, Maxim Solodovnik <so...@gmail.com>
> 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 <se...@gmail.com> wrote:
> >
> > > Hi Maxim,
> > >
> > > Is it about jQuery or Kendo draggable?
> > >
> > > Sebastien.
> > >
> > > On Tue, Apr 26, 2016 at 7:06 PM, Maxim Solodovnik <
> solomax666@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
Posted by Sebastien <se...@gmail.com>.
Hi Maxim,
On Wed, Apr 27, 2016 at 6:38 AM, Maxim Solodovnik <so...@gmail.com>
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 <se...@gmail.com> wrote:
>
> > Hi Maxim,
> >
> > Is it about jQuery or Kendo draggable?
> >
> > Sebastien.
> >
> > On Tue, Apr 26, 2016 at 7:06 PM, Maxim Solodovnik <so...@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
>
Re: Draggable multiple containment
Posted by Maxim Solodovnik <so...@gmail.com>.
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 <se...@gmail.com> wrote:
> Hi Maxim,
>
> Is it about jQuery or Kendo draggable?
>
> Sebastien.
>
> On Tue, Apr 26, 2016 at 7:06 PM, Maxim Solodovnik <so...@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
Re: Draggable multiple containment
Posted by Sebastien <se...@gmail.com>.
Hi Maxim,
Is it about jQuery or Kendo draggable?
Sebastien.
On Tue, Apr 26, 2016 at 7:06 PM, Maxim Solodovnik <so...@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
>