Legacy code and mode tools behaviour

41 views
Skip to first unread message

Branko Surjancev

unread,
Jul 22, 2018, 11:59:39 PM7/22/18
to MooTools Users
Hi all,

  I am working on legacy project code utilizing mootools ver 1.2. I am not proficient in using mootools and need some help.

 I have HTML structure like:

...   
<div class="a_container">
<div class="tree" style="top: -5570px; left: -10892px;">
<div class="row" style="top: 5452px">
<div class="leaf" style="left: 10647px; "><img src="...." rel="b28d3ee3-920f-4eae-a39d-c3a30eef4ecb"></div>
<div class="leaf" style="left: 10738px; "><img src="...." rel="9bc64e3e-08a4-4929-88eb-e97a8c3a4664"></div>
<div class="leaf" style="left: 10829px; "><img src="..." rel="10f2e863-93c5-40ba-9ce6-8afc69e79373"></div>
<div class="leaf" style="left: 10920px; "><img src="...." rel="c07062ef-d726-4d38-a4ac-340b4915a7d5"></div>
</div>
<div class="row" style="top: 5499px">
<div class="leaf" style="left: 10692px; "><img src="..."  rel="31608a69-d826-4bf3-9bc4-1f7f7a029ab2"></div>
<div class="leaf" style="left: 10783px; "><img src="...." rel="c40ab0cc-b934-41e3-bc3d-660cfbdc74c0"></div>
<div class="leaf" style="left: 10874px; "><img src="...." rel="38311d1c-dec5-49e0-8390-b7a5e2872e5e"></div>
<div class="leaf" style="left: 10965px; "><img src="..." rel="a5669bd1-90b0-4a45-b65a-4e4540677f09"></div>
</div>
<div class="row" style="top: 5546px">
..........
.........
.........
</div>
<div class="row" style="top: 5593px">
............
...........
</div>
<div class="row" style="top: 6157px">
....
....
</div>
</div>
</div
  ...

in JS:

this._treeElement = this.el.getElement('.tree');
if (!this.dragFx) {
            this.dragFx = new Drag(this._treeElement , { preventDefault: true, limit: { 'x': [this.treeLeftMaxLimit, this.treeBoundLeft], 'y': [this.treeBottomMaxLimit, this.treeBoundTop] } });

....

 this._treeElement.addEvent('onBeforeStart', Function.createDelegate(this, this.dragStart));
 this._treeElement.addEvent('onComplete', Function.createDelegate(this, this.dragEnd));

 this.dragFx.addEvent('onBeforeStart',Function.createDelegate(this, this.dragStart));
 this.dragFx.addEvent('onComplete',Function.createDelegate(this, this.dragEnd));
 this.dragFx.addEvent('onCancel', Function.createDelegate(this, this.dragEnd));


.....

Problem:

 When rendered draging is actually possible only if its clicked on the "leaf" divs, and then whole "tree" can be dragged, but if clicked in any space between "leaf" divs drag is not working.

Can you point me in the right direction how to fix this?

Thanks 

  

Johnny Fuery

unread,
Jul 23, 2018, 1:21:04 AM7/23/18
to mootool...@googlegroups.com
Some of us are still here.

Mind putting this into a jsfiddle (or similar) for us, though? It would help see first-hand what you've got going on here.

Cheers,

--

---
You received this message because you are subscribed to the Google Groups "MooTools Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mootools-users+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Breno Ribeiro

unread,
Jul 23, 2018, 7:44:44 AM7/23/18
to mootool...@googlegroups.com
This.

While you do it, try using a background color on the tree and another for the rows or leafs.


--
[]'s,

Breno Ribeiro

To unsubscribe from this group and stop receiving emails from it, send an email to mootools-user...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

---
You received this message because you are subscribed to the Google Groups "MooTools Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mootools-user...@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages