Ruby on Rails | Screencasts | Download | Documentation | Weblog | Community | Source

Ticket #5071 (new enhancement)

Opened 3 years ago

Last modified 1 year ago

[PATCH] Constrain Draggables' movement to a given boundary

Reported by: railstickets@stevenluscherdesign.com Assigned to: Rails
Priority: high Milestone:
Component: script.aculo.us Version:
Severity: normal Keywords: scriptaculous draggable constrain rectangle coordinates boundary
Cc:

Description

Will it be possible to constrain the movement of a Draggable to the boundaries of a given element? Optionally, developers may need to constrain a Draggable to an arbitrary set of coordinates, either relative to the containing element, or to the whole document.

ie. to constrain a Draggable to a rectangle (relative to the Draggable's containing element) whose top left corner is at [x.y] and whose bottom right corner is at [a,b], one might do this: 

new Draggable('my_div', { boundary: [ [x,y] , [a,b] ], constrain:'parent' } );

Attachments

dragdrop.patch (63.3 kB) - added by d15c1pl3 on 10/22/06 01:12:20.
Boundry Constraints

Change History

06/17/06 10:51:41 changed by anonymous

It would be nice to be able to set a 'snap' for the boundary as wel.

07/27/06 13:33:27 changed by anonymous

While we are looking at this it may also be useful to have a contraint of a particular element. An example of this is below (a nested list). 

<div style="height:200px;">
  <div style="float:left;">
    <h3>This is the first list</h3>
    <ul class="sortabledemo" id="firstlist_rev3" style="height:150px;width:200px;">
      <li class="green" id="firstlist_rev3_firstlist1">Item 1 from first list.
        <ul id="sublist1">
          <li class="green" id="firstlist_rev3_firstlist1_1">Item 1.1 from first list.</li>
          <li class="green" id="firstlist_rev3_firstlist1_2">Item 1.2 from first list.</li>
          <li class="green" id="firstlist_rev3_firstlist1_3">Item 1-3 from first list.</li>
        </ul>
      </li>
      <li class="green" id="firstlist_rev3_firstlist2">Item 2 from first list.</li>
      <li class="green" id="firstlist_rev3_firstlist3">Item 3 from first list.</li>
    </ul>
  </div>
</div>
  <script type="text/javascript">
 // <![CDATA[
   Sortable.create("sublist1",
     {dropOnEmpty:true,containment:["sublist1","firstlist_rev3"],constraint:false});
   Sortable.create("firstlist_rev3",
     {dropOnEmpty:true,containment:["firstlist_rev3","sublist1"],constraint:true});
 // ]]>
 </script>

It would be useful to be able to have: 

Sortable.create("sublist1",
     {dropOnEmpty:true,containment:["sublist1","firstlist_rev3"],constraint:'firstlist_rev3'});

10/22/06 01:12:20 changed by d15c1pl3

  • attachment dragdrop.patch added.

Boundry Constraints

10/22/06 01:22:15 changed by d15c1pl3

I added a new variable to the Draggables class boundary, which is expected to be an 2x2 array or false.

UnitTesting passed with the changes.

10/22/06 01:46:33 changed by d15c1pl3

  • summary changed from Constrain Draggables' movement to a given boundary to [PATCH] Constrain Draggables' movement to a given boundary.

Currently the patch above is World Relative. I belive this takes care of my application needs. If there is a big need I will be happy to more effort into the constraints.

11/16/06 15:52:11 changed by cherix

Nice add-on

Unfortunately, this way of expressing boundaries - relative to prior position - is not very useful to me. I'm working on a patch to add a :containment option which would take the id of a parent as parameter and contain drag inside this DOM element.

06/27/07 14:29:24 changed by 1pxsolid

I've just hooked this up and it's fantastic. Was just what I was looking for.