Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #40003 > unrolled thread

Drag resize library

Back to article view | Back to comp.lang.javascript

Contents

  Drag resize library Andrew Poulos <ap_prog@hotmail.com> - 2021-04-22 10:44 +1000
    Re: Drag resize library "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2021-04-22 06:32 -0700
      Re: Drag resize library Andrew Poulos <ap_prog@hotmail.com> - 2021-04-23 12:50 +1000
        Re: Drag resize library Jonas Thörnvall <jonas.thornvall@gmail.com> - 2021-04-23 00:32 -0700
          Re: Drag resize library Jonas Thörnvall <jonas.thornvall@gmail.com> - 2021-04-23 00:35 -0700
            Re: Drag resize library Jonas Thörnvall <jonas.thornvall@gmail.com> - 2021-04-23 00:43 -0700
          Re: Drag resize library Jonas Thörnvall <jonas.thornvall@gmail.com> - 2021-04-23 00:39 -0700
        Re: Drag resize library "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2021-04-24 13:50 -0700
          Re: Drag resize library "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2021-04-25 22:14 -0700

#40003 — Drag resize library

Is there a library anyone can recommend which:

- when an element is selected, and it is set as draggable/resizable, 
handles appear around the element

- can attach custom buttons to the handles.

- can move elements about

- can resize elements. If you drag from the corner of the element the 
resizing maintains the element's aspect ratio.

- trigger events when an element has been moved or resized.

- can nominate an area that limits the element ie. the element cannot be 
dragged out of the area nor can it be resized larger than the area nor 
overlap the edges of the area.

- is not run as a module or requires jQuery, React, Vue...

The ones I've looked in detail at, including interactjs, moveablejs, 
don't seem to work well enough and I'm kind of hoping not needing to 
write one myself.

Andrew Poulos

[toc] | [next] | [standalone]

#40005

On Wednesday, April 21, 2021 at 7:44:40 PM UTC-5, Andrew Poulos wrote:
> Is there a library anyone can recommend which: 
> 
> - when an element is selected, and it is set as draggable/resizable, 
> handles appear around the element 
> 
> - can attach custom buttons to the handles. 
> 
> - can move elements about 
> 
> - can resize elements. If you drag from the corner of the element the 
> resizing maintains the element's aspect ratio. 
> 
> - trigger events when an element has been moved or resized. 
> 
> - can nominate an area that limits the element ie. the element cannot be 
> dragged out of the area nor can it be resized larger than the area nor 
> overlap the edges of the area. 
> 
> - is not run as a module or requires jQuery, React, Vue... 
> 
> The ones I've looked in detail at, including interactjs, moveablejs, 
> don't seem to work well enough and I'm kind of hoping not needing to 
> write one myself. 

Writing one I don't think is too bad. I'll try my hand at it today if I find some free time and someone doesn't post an acceptable solution soon.

[toc] | [prev] | [next] | [standalone]

#40006

On 22/04/2021 11:32 pm, Michael Haufe (TNO) wrote:
> On Wednesday, April 21, 2021 at 7:44:40 PM UTC-5, Andrew Poulos wrote:
>> Is there a library anyone can recommend which:
>>
>> - when an element is selected, and it is set as draggable/resizable,
>> handles appear around the element
>>
>> - can attach custom buttons to the handles.
>>
>> - can move elements about
>>
>> - can resize elements. If you drag from the corner of the element the
>> resizing maintains the element's aspect ratio.
>>
>> - trigger events when an element has been moved or resized.
>>
>> - can nominate an area that limits the element ie. the element cannot be
>> dragged out of the area nor can it be resized larger than the area nor
>> overlap the edges of the area.
>>
>> - is not run as a module or requires jQuery, React, Vue...
>>
>> The ones I've looked in detail at, including interactjs, moveablejs,
>> don't seem to work well enough and I'm kind of hoping not needing to
>> write one myself.
> 
> Writing one I don't think is too bad. I'll try my hand at it today if I find some free time and someone doesn't post an acceptable solution soon.
> 
Thank you, though I don't think that writing one is as straightforward 
as you might be expecting. For example, how would you add handles to an 
image (possibly by wrapping the image in a div and adding the handles to 
the div) or how would you drag a PDF (possibly by wrapping it in a div 
and then adding another div over it but then how do you interact with 
the PDF?).

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#40007

fredag 23 april 2021 kl. 04:50:46 UTC+2 skrev Andrew Poulos:
> On 22/04/2021 11:32 pm, Michael Haufe (TNO) wrote: 
> > On Wednesday, April 21, 2021 at 7:44:40 PM UTC-5, Andrew Poulos wrote: 
> >> Is there a library anyone can recommend which: 
> >> 
> >> - when an element is selected, and it is set as draggable/resizable, 
> >> handles appear around the element 
> >> 
> >> - can attach custom buttons to the handles. 
> >> 
> >> - can move elements about 
> >> 
> >> - can resize elements. If you drag from the corner of the element the 
> >> resizing maintains the element's aspect ratio. 
> >> 
> >> - trigger events when an element has been moved or resized. 
> >> 
> >> - can nominate an area that limits the element ie. the element cannot be 
> >> dragged out of the area nor can it be resized larger than the area nor 
> >> overlap the edges of the area. 
> >> 
> >> - is not run as a module or requires jQuery, React, Vue... 
> >> 
> >> The ones I've looked in detail at, including interactjs, moveablejs, 
> >> don't seem to work well enough and I'm kind of hoping not needing to 
> >> write one myself. 
> > 
> > Writing one I don't think is too bad. I'll try my hand at it today if I find some free time and someone doesn't post an acceptable solution soon. 
> >
> Thank you, though I don't think that writing one is as straightforward 
> as you might be expecting. For example, how would you add handles to an 
> image (possibly by wrapping the image in a div and adding the handles to 
> the div) or how would you drag a PDF (possibly by wrapping it in a div 
> and then adding another div over it but then how do you interact with 
> the PDF?). 
> 
> Andrew Poulos
Can't you use iframes in divs?
<div id=DRUM>
	<div id="DRUMheader">Virtual Drums
		<iframe src="/VirtDrum.html" id="DrumID" name="DrumID"></iframe>
		<button onClick="toggleVirtDrum();"><B>X</B></button></div>
	</div>
</div>

[toc] | [prev] | [next] | [standalone]

#40008

fredag 23 april 2021 kl. 09:32:23 UTC+2 skrev Jonas Thörnvall:
> fredag 23 april 2021 kl. 04:50:46 UTC+2 skrev Andrew Poulos: 
> > On 22/04/2021 11:32 pm, Michael Haufe (TNO) wrote: 
> > > On Wednesday, April 21, 2021 at 7:44:40 PM UTC-5, Andrew Poulos wrote: 
> > >> Is there a library anyone can recommend which: 
> > >> 
> > >> - when an element is selected, and it is set as draggable/resizable, 
> > >> handles appear around the element 
> > >> 
> > >> - can attach custom buttons to the handles. 
> > >> 
> > >> - can move elements about 
> > >> 
> > >> - can resize elements. If you drag from the corner of the element the 
> > >> resizing maintains the element's aspect ratio. 
> > >> 
> > >> - trigger events when an element has been moved or resized. 
> > >> 
> > >> - can nominate an area that limits the element ie. the element cannot be 
> > >> dragged out of the area nor can it be resized larger than the area nor 
> > >> overlap the edges of the area. 
> > >> 
> > >> - is not run as a module or requires jQuery, React, Vue... 
> > >> 
> > >> The ones I've looked in detail at, including interactjs, moveablejs, 
> > >> don't seem to work well enough and I'm kind of hoping not needing to 
> > >> write one myself. 
> > > 
> > > Writing one I don't think is too bad. I'll try my hand at it today if I find some free time and someone doesn't post an acceptable solution soon. 
> > > 
> > Thank you, though I don't think that writing one is as straightforward 
> > as you might be expecting. For example, how would you add handles to an 
> > image (possibly by wrapping the image in a div and adding the handles to 
> > the div) or how would you drag a PDF (possibly by wrapping it in a div 
> > and then adding another div over it but then how do you interact with 
> > the PDF?). 
> > 
> > Andrew Poulos
> Can't you use iframes in divs? 
> <div id=DRUM> 
> <div id="DRUMheader">Virtual Drums 
> <iframe src="/VirtDrum.html" id="DrumID" name="DrumID"></iframe> 
> <button onClick="toggleVirtDrum();"><B>X</B></button></div> 
> </div> 
> </div>
I have not made my div resizable, or given them a scope to move around in. And i guess you would want something window liked that could be dropped not just minimised?

[toc] | [prev] | [next] | [standalone]

#40010

fredag 23 april 2021 kl. 09:35:36 UTC+2 skrev Jonas Thörnvall:
> fredag 23 april 2021 kl. 09:32:23 UTC+2 skrev Jonas Thörnvall: 
> > fredag 23 april 2021 kl. 04:50:46 UTC+2 skrev Andrew Poulos: 
> > > On 22/04/2021 11:32 pm, Michael Haufe (TNO) wrote: 
> > > > On Wednesday, April 21, 2021 at 7:44:40 PM UTC-5, Andrew Poulos wrote: 
> > > >> Is there a library anyone can recommend which: 
> > > >> 
> > > >> - when an element is selected, and it is set as draggable/resizable, 
> > > >> handles appear around the element 
> > > >> 
> > > >> - can attach custom buttons to the handles. 
> > > >> 
> > > >> - can move elements about 
> > > >> 
> > > >> - can resize elements. If you drag from the corner of the element the 
> > > >> resizing maintains the element's aspect ratio. 
> > > >> 
> > > >> - trigger events when an element has been moved or resized. 
> > > >> 
> > > >> - can nominate an area that limits the element ie. the element cannot be 
> > > >> dragged out of the area nor can it be resized larger than the area nor 
> > > >> overlap the edges of the area. 
> > > >> 
> > > >> - is not run as a module or requires jQuery, React, Vue... 
> > > >> 
> > > >> The ones I've looked in detail at, including interactjs, moveablejs, 
> > > >> don't seem to work well enough and I'm kind of hoping not needing to 
> > > >> write one myself. 
> > > > 
> > > > Writing one I don't think is too bad. I'll try my hand at it today if I find some free time and someone doesn't post an acceptable solution soon. 
> > > > 
> > > Thank you, though I don't think that writing one is as straightforward 
> > > as you might be expecting. For example, how would you add handles to an 
> > > image (possibly by wrapping the image in a div and adding the handles to 
> > > the div) or how would you drag a PDF (possibly by wrapping it in a div 
> > > and then adding another div over it but then how do you interact with 
> > > the PDF?). 
> > > 
> > > Andrew Poulos 
> > Can't you use iframes in divs? 
> > <div id=DRUM> 
> > <div id="DRUMheader">Virtual Drums 
> > <iframe src="/VirtDrum.html" id="DrumID" name="DrumID"></iframe> 
> > <button onClick="toggleVirtDrum();"><B>X</B></button></div> 
> > </div> 
> > </div>
> I have not made my div resizable, or given them a scope to move around in. And i guess you would want something window liked that could be dropped not just minimised?
It could be nice to have something generate resizable windows, i am a bit hesitant that you guys would like my way to interface it though LoL

[toc] | [prev] | [next] | [standalone]

#40009

fredag 23 april 2021 kl. 09:32:23 UTC+2 skrev Jonas Thörnvall:
> fredag 23 april 2021 kl. 04:50:46 UTC+2 skrev Andrew Poulos: 
> > On 22/04/2021 11:32 pm, Michael Haufe (TNO) wrote: 
> > > On Wednesday, April 21, 2021 at 7:44:40 PM UTC-5, Andrew Poulos wrote: 
> > >> Is there a library anyone can recommend which: 
> > >> 
> > >> - when an element is selected, and it is set as draggable/resizable, 
> > >> handles appear around the element 
> > >> 
> > >> - can attach custom buttons to the handles. 
> > >> 
> > >> - can move elements about 
> > >> 
> > >> - can resize elements. If you drag from the corner of the element the 
> > >> resizing maintains the element's aspect ratio. 
> > >> 
> > >> - trigger events when an element has been moved or resized. 
> > >> 
> > >> - can nominate an area that limits the element ie. the element cannot be 
> > >> dragged out of the area nor can it be resized larger than the area nor 
> > >> overlap the edges of the area. 
> > >> 
> > >> - is not run as a module or requires jQuery, React, Vue... 
> > >> 
> > >> The ones I've looked in detail at, including interactjs, moveablejs, 
> > >> don't seem to work well enough and I'm kind of hoping not needing to 
> > >> write one myself. 
> > > 
> > > Writing one I don't think is too bad. I'll try my hand at it today if I find some free time and someone doesn't post an acceptable solution soon. 
> > > 
> > Thank you, though I don't think that writing one is as straightforward 
> > as you might be expecting. For example, how would you add handles to an 
> > image (possibly by wrapping the image in a div and adding the handles to 
> > the div) or how would you drag a PDF (possibly by wrapping it in a div 
> > and then adding another div over it but then how do you interact with 
> > the PDF?). 
> > 
> > Andrew Poulos
> Can't you use iframes in divs? 
> <div id=DRUM> 
> <div id="DRUMheader">Virtual Drums 
> <iframe src="/VirtDrum.html" id="DrumID" name="DrumID"></iframe> 
> <button onClick="toggleVirtDrum();"><B>X</B></button></div> 
> </div> 
> </div>
If you solve my recursion problem i will look into it nod nod LoL
This one seem alot easier to solve "well except for ***limiting*** the area and resize" but that seems pretty much to be Javascript?

[toc] | [prev] | [next] | [standalone]

#40013

On Thursday, April 22, 2021 at 9:50:46 PM UTC-5, Andrew Poulos wrote:
> On 22/04/2021 11:32 pm, Michael Haufe (TNO) wrote: 
> >
> > Writing one I don't think is too bad. I'll try my hand at it today if I find some free time and someone doesn't post an acceptable solution soon. 
> >
> Thank you, though I don't think that writing one is as straightforward 
> as you might be expecting. For example, how would you add handles to an 
> image (possibly by wrapping the image in a div and adding the handles to 
> the div) or how would you drag a PDF (possibly by wrapping it in a div 
> and then adding another div over it but then how do you interact with 
> the PDF?). 

I didn't have as much free time as expected, but I did start a partial implementation:

<https://codepen.io/mlhaufe/pen/RwKqzvr?editors=0011>

So far:

1. You can drag around and it will be constrained by the container
2. You can resize with the east, south, and southeast handle
3. Resizing (as it is currently) is constrained by the container

The rest of your requirements I'll play with as time permits. 

Admittedly I took a detour and decided to play with the CSS object model so that I could keep the styling semantically close to the related implementation.

[toc] | [prev] | [next] | [standalone]

#40016

On Saturday, April 24, 2021 at 3:50:14 PM UTC-5, Michael Haufe (TNO) wrote:
> I didn't have as much free time as expected, but I did start a partial implementation: 
> 
> <https://codepen.io/mlhaufe/pen/RwKqzvr?editors=0011> 
> 
> So far: 
> 
> 1. You can drag around and it will be constrained by the container 
> 2. You can resize with the east, south, and southeast handle 
> 3. Resizing (as it is currently) is constrained by the container 
> 
> The rest of your requirements I'll play with as time permits. 
> 
> Admittedly I took a detour and decided to play with the CSS object model so that I could keep the styling semantically close to the related implementation.

Mostly done now:

<https://codepen.io/mlhaufe/pen/RwKqzvr?editors=1010>

Doesn't raise events yet, and there are some edge cases to debug but otherwise the core functionality is there.

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web