/    Sign up×
Community /Pin to ProfileBookmark

help me locate the javascript associated with a mouse drag

I recently started working for a company that had been getting all of its software provided by overseas developers.

I was hired on because of my years of experience in software, but all of those years were in Windows Forms using C#. This project is still in Visual Studio, but largely it is controlled by HTML, CSS, and Javascript – which I am not good at.

My assignment right now: When User drags on a row on a table, a pointer appears on the left of the grid control, follows the row to indicate where the row is able to be dropped, and the row is moved to that location when the User releases the mouse.

Right now, the mouse is not moving 1 to 1 with the arrow. The more rows in the grid, the greater the discrepancy between the mouse and the pointer.

https://i.imgur.com/031xiE0.png![https://i.imgur.com/031xiE0.png](src)

In the image above, the mouse is on “jp2code 035” while the pointer is up at “Task 13”.

I am not here to get you to solve the issue for me, but I don’t know how to find the code associated with this.

The file that is being called is called TaskListViewer, but it has no controls in the designer and very little code behind. Everything is loaded by the master page and source scripts.

Can anyone offer suggestions on how I could go about locating where the issue is in Javascript? For a Windows Forms application, I would simply look at event handlers for the control.

to post a comment
JavaScript

18 Comments(s)

Copy linkTweet thisAlerts:
@jp2codeauthorOct 16.2020 — The image tag did not work

https://i.imgur.com/031xiE0.png
Copy linkTweet thisAlerts:
@jp2codeauthorOct 16.2020 — I went into the Chrome console's Source tab, went to the Event Listener Breakpoints, and put one on "Mouse > click", but it didn't break any execution.

I also did a search on keyword "mousemove" in the project. There are several references in many of the minified jquery files, but nothing in the actual project itself.

I'm stumped.
Copy linkTweet thisAlerts:
@SempervivumOct 16.2020 — I had the same task some time ago and my first approach was using the sorting function of jQuery UI:

https://jqueryui.com/sortable/

I suspect it would be easier to do it by a ready-to-use script than diving into the existing code and fixing the error.

Has that site to be touch friendly? Currently I'm not sure if jQuery UI supports operation by touch.
Copy linkTweet thisAlerts:
@dmitry_smetaninOct 16.2020 — I have also similar task

https://jqueryui.com/sortable/

for task, I have used this plugin and it works well
Copy linkTweet thisAlerts:
@jp2codeauthorOct 16.2020 — The functionality of the link you provided is a lot like it, except that it doesn't have the little arrow that I'm having to debug.

This is software for maintaining utility operations, and I don't know if it will ever be loaded on a mobile device other than a laptop.

In looking at the elements in the console window, most of the CSS and javascript links look standard except for a few, and most of those odd looking ones are some type of "sooperfish" add-on. From what I've found, that addon is designed to create colorful menus and even has a Black & White arrow option, but I haven't found anything to verify that yet.
Copy linkTweet thisAlerts:
@SempervivumOct 16.2020 — There is an option available that defines a cursor:

https://api.jqueryui.com/sortable/#option-cursor

In CSS the cursor can also be set to a bitmap image:

https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

you would have to check if this is supported by jQuery UI either.
Copy linkTweet thisAlerts:
@SempervivumOct 16.2020 — Another option might be "helper"

https://api.jqueryui.com/sortable/#option-helper
>Multiple types supported:

String: If set to "clone", then the element will be cloned and the clone will be dragged.

Function: A function that will return a DOMElement to use while dragging. The function receives the event and the element being sorted.


By using the function it should be possible to use any custom DOM element you like, including a cursor.
Copy linkTweet thisAlerts:
@jp2codeauthorOct 16.2020 — There is a style sheet "sooperfish.css" that sets the position to absolute and height to 7px with a div.sf-arrow tag.

There is also a jquery file "jquery.sooperfish.js" with several small changes from the original.

Most of the code looks like it came with the control. How do I find what would cause the div.sf-arrow to not be where the mouse cursor is? It is like it is off by 10 or 20 percent of the list size. For a small list of 5 to 20 rows, it's not noticeable. As the list size grows, the arrow indicator offset is obvious.

/**
Stylesheet for SooperFish by www.SooperThemes.com
Author: Jurriaan Roelofs
*/

/* Configuration of menu width */

html body ul.sf-menu ul
,html body ul.sf-menu ul li {
width:80px;
}
html body ul.sf-menu ul ul {
margin:0 0 0 80px;
}

/* Framework for proper showing/hiding/positioning */
/* DO NOT EDIT FROM HERE */
ul.sf-menu
,ul.sf-menu * {
margin:0;
padding:0;
}

ul.sf-menu {
display:block;
position:relative;
}
ul.sf-menu li {
display:block;
list-style:none;
float:left;
position:relative;
background:#ededed;
}
ul.sf-menu li:hover {
visibility:inherit; /* fixes IE7 'sticky bug' */
}
ul.sf-menu a,
ul.sf-menu span {
display:block;
position:relative;
}
ul.sf-menu ul {
position:absolute;
left:0;
width:50px;
top:auto;
left:-999999px;
}
ul.sf-menu ul a,
ul.sf-menu ul span {
zoom:1; /* IE6/7 fix */
}
ul.sf-menu ul li {
float:left; /* Must always be floated otherwise there will be a rogue 1px margin-bottom in IE6/7 */
width:150px;
}
ul.sf-menu ul ul {
top:0;
margin:0 0 0 150px
}

ul.sf-menu li:hover ul,ul.sf-menu li:focus ul,ul.sf-menu li.sf-hover ul { /*first level*/
left:auto;
}
ul.sf-menu li:hover ul ul,ul.sf-menu li:focus ul ul,ul.sf-menu li.sf-hover ul ul {
left:-999999px;
}
ul.sf-menu ul li:hover ul,ul.sf-menu ul li:focus ul,ul.sf-menu ul li.sf-hover ul {/*second level*/
left:auto;
}
ul.sf-menu ul li:hover ul ul,ul.sf-menu ul li:focus ul ul,ul.sf-menu ul li.sf-hover ul ul {
left:-999999px;
}
ul.sf-menu ul ul li:hover ul,ul.sf-menu ul ul li:focus ul,ul.sf-menu ul ul li.sf-hover ul {/*third level*/
left:auto;
}
ul.sf-menu ul ul li:hover ul ul,ul.sf-menu ul ul li:focus ul ul,ul.sf-menu ul ul li.sf-hover ul ul {
left:-999999px;
}
ul.sf-menu ul ul ul li:hover ul,ul.sf-menu ul ul ul li:focus ul,ul.sf-menu ul ul ul li.sf-hover ul {/*fourth level*/
left:auto;
}
ul.sf-menu ul ul ul li:hover ul ul,ul.sf-menu ul ul ul li:focus ul ul,ul.sf-menu ul ul ul li.sf-hover ul ul {
left:-999999px;
}

/* autoArrows CSS */

div.sf-arrow {
width:7px;
height:7px;
position:absolute;
top:8px;
right:0;
display:block;
overflow:hidden; /* making sure IE6 doesn't overflow and expand the box */
font-size:1px;
}

ul ul div.sf-arrow {
right:12px;
top:7px;
background-position:0 50%;
}

.sooperfish-zindex {
position:relative;
z-index:9999;
}

.submenuarrow{
position: absolute;
top: 25%;
right: 5px;
border: 0px;
}
Copy linkTweet thisAlerts:
@jp2codeauthorOct 16.2020 — I think my support group here might have gone home. lol

I'm still looking into this, though.

In the file jquery.sooperfish.js, the only places that I can see where the *vertical* positions are being altered are in the onshow event:

onShow: function () {


var menutext = $(this).parent().children('a').text();

if (menutext == 'Add') {
var beLength = $(this).parent().children().children('li.sf-parent').children('ul').children('li').length;
if (beLength >= 32) {

$(this).parent().children().children('li.sf-parent').children('ul').css({ left: '-1003px', top: '2px' });
}
else if (beLength < 32 && beLength >= 19) {
$(this).parent().children().children('li.sf-parent').children('ul').css({ left: '-603px', top: '2px' });

}
else {

$(this).parent().children().children('li.sf-parent').children('ul').css({ left: '-403px', top: '2px' });
}
}
if (menutext != 'Add') {
$(this).parent().children().children('li.sf-parent').children('ul').css({ left: '0px' });
}
var favimg = $(this).parent().children('img').attr('id');
if (favimg == 'imgFavItem') {
// $(this).parent().children().children()
$(this).parent().children('ul').width(200);
}
}, //callback after showing menu


And again in the jquery function **showSooperfishUl()** with this snippet:

//var
if (typeof ($(submenu).attr('id')) == 'undefined' && $(this).attr('ec') > 0) {
// alert($(submenu).width());
$("#mframe").css({ height: (calculateHeight)+10, width: $(submenu).width() + 10, top: $(submenu).offset().top, left: $(submenu).offset().left, visibility: 'visible' });
$("#mframe").show();
}
else //if($(submenu).attr('id') == 'childMenu')
{
var maxRows;
var childCount = $(submenu).children('li').length;
var widthvalue = ($(submenu).width());
if (widthvalue == 800) {
maxRows = childCount / 4;
maxRows = Math.ceil(maxRows);
}
else if (widthvalue == 400) {
maxRows = childCount / 2;
maxRows = Math.ceil(maxRows);
}
else {
maxRows = childCount / 1;
maxRows = Math.ceil(maxRows);
}
var maxLimit = childCount / maxRows;
if (maxLimit >= 1)
childCount = maxRows;

$("#childframe").css({ height: (28 * childCount) +10, width: $(submenu).width() + 10, top: $(submenu).offset().top, left: $(submenu).offset().left, visibility: 'visible' });
$("#childframe").show();
}


This is getting over my head in the JavaScript department.

I see the offset() function is called, but I don't know if that would cause errors as the number of rows in the Grid Control got larger.
Copy linkTweet thisAlerts:
@SempervivumOct 17.2020 — @jp2code#1624322
>I think my support group here might have gone home. lol

As far as I'm concerned I went asleep according to my local time (CEDST) :D

When googling for "sooperfish.js" I get this only:

https://dxpr.com/open-source/jquery/jquery-sooperfish-dropdown-menus

A dropdown menu. Does this include your sorting function?
Copy linkTweet thisAlerts:
@jp2codeauthorOct 17.2020 — @Sempervivum#1624326 I confess that I don't know exactly what our predecessors from India intended to use "sooperfish.js" for. It does seem to be closely tied to the arrow indicator. It is the only "non-standard" jquery reference in the page source.
Copy linkTweet thisAlerts:
@KeverOct 17.2020 — 
Have you searched the javascript code for "drag" or "arrrow"?

Which events are attached to the rows?
Copy linkTweet thisAlerts:
@jp2codeauthorOct 18.2020 — > @Kever#1624338 Which events are attached to the rows?

That's a good question. My skills at debugging javascript are not very good. I know enough to say that objects can be defined with CSS in the page or inherited from parent forms, and that similarly javascript can be written to handle events from those objects. But I don't know of a way to tell what events are tied to objects.

When I selected a portion of your text above, the browser displayed an option to Quote, which I used, but if I were to right-click and go to Inspect in Chrome, I am just brought to a blank <p> block from the Elements tab.

Is there a way that I could find what events are attached by right-clicking a row and selecting Inspect? Chrome will take me to a section?
Copy linkTweet thisAlerts:
@KeverOct 18.2020 — The elements tab has a panel with the DOM structure and another panel with the tabs styles, computed, event listeners etc.

The event listener tab shows the attached events. When you click on those events, it wil show you information about to which element the event is attached, the name of the attached function. It also provides a link to sourcefile and linenumber of that function.

On large tables it's quite common to use event delegation and only attach an event listener to the table, instead of event listeners to each row. So you might not be able to find any events on the rows. You can tick the ancestor box, to find those events.
Copy linkTweet thisAlerts:
@jp2codeauthorOct 19.2020 — Apparently, I have loads of listeners on the panel, most are DXR.axd references.

https://i.imgur.com/ju0MSKkh.jpg

What are those?
Copy linkTweet thisAlerts:
@jp2codeauthorOct 19.2020 — The image isn't showing....

https://i.imgur.com/ju0MSKkh.jpg![https://i.imgur.com/ju0MSKkh.jpg](src)
Copy linkTweet thisAlerts:
@jp2codeauthorOct 19.2020 — Apparently, I have loads of listeners on the panel, most are DXR.axd references.

https://i.imgur.com/ju0MSKk.jpg

What are those?
Copy linkTweet thisAlerts:
@KeverOct 19.2020 — According to google they are DevExpress web components or ASP.NET WebForms. All those references are to the same file, the last part after the colon is the line number.

I forgot to mention you have to select a table row in the elements panel. These seems to be the events of the body element, since I only see events attached to the window and the document.
×

Success!

Help @jp2code spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 3.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 10 SATS,
)...