Re: Draggable multiple containment

[Maxim Solodovnik]

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

[Sebastien]

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

[Maxim Solodovnik]

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

[Sebastien]

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

[Maxim Solodovnik]

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

[Sebastien]

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

[Maxim Solodovnik]

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

[Sebastien]

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

[Sebastien]

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

[Maxim Solodovnik]

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

[Sebastien]

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

[Maxim Solodovnik]

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

[Sebastien]

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
>

Draggable multiple containment

[Maxim Solodovnik]

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