2016-07-25 15 views
1

Ich versuche die Pixelkoordinaten der Mausposition während eines Aufrufs einer Funktion zu erhalten (exe_datepicker). Diese Funktion wird in einem relativ großen Rahmen ausgeführt (im sogenannten arcplan 8.7 HTML5-Client). So gelten bestimmte Einschränkungen:Mausposition während eines Funktionsaufrufs

  • Es gibt keine Chance, keine DOM-Objekte auszuwählen, da die IDs/Namen nicht auffindbar sind
  • Meine exe_datepicker Funktion durch eine arcplan-Funktion aufgerufen wird.
  • Ich kann nicht andere Aufgaben oder Funktionen des arcplan zugreifen - Rahmen

Was ich versuche, hier zu tun:

  1. Erstellen Sie ein temporäres Objekt (tobj) und hängen Sie ihn an den Körper
  2. Verschieben Sie es an die Mausposition
  3. Verwenden Sie den Datumswahlschalter tobj
  4. Durch eine API wird das ausgewählte Datum retu
  5. Zerstören Sie das tobj

Mein einziges Problem mit der arcplan blackbox rned ist die tobj auf die Maus zu bewegen. Wie könnte ich dies erreichen, als jemand, der ein Anfänger in JS ist und mit der Einschränkung, es innerhalb der exe_datepicker Funktion passieren zu lassen (die aufgerufen wird, wenn man auf dieses Icon klickt)?

Vielen Dank!

Bearbeiten: Sorry, sieht aus wie der Code wurde nicht in meinem ersten Versuch veröffentlicht.

function exe_datepicker(objekt,dateiname,sprache,miniDat,maxiDat) { 
 
\t $.datepicker.setDefaults($.datepicker.regional[ "" ]); 
 
\t $.datepicker.setDefaults($.datepicker.regional[ sprache ]); 
 
\t $('<input type="text" id="dummy_'+objekt+'" name="dummy_'+objekt+'" readonly="readonly">').appendTo("body"); 
 

 
\t 
 
\t //I tried to play around here, but event.pagex is always undefined inside the alert. 
 
\t $(this).one("click", function(event) { 
 

 
\t \t \t \t \t \t \t \t \t \t \t alert("clicked " + event.pageX); 
 
\t \t \t 
 
\t \t \t \t \t \t \t \t \t \t }); 
 
\t 
 
\t var tobj = $('#dummy_'+objekt+''); 
 
\t 
 
\t $(this).trigger("click"); 
 

 
\t tobj.css({ 
 
\t \t "position":"absolute", 
 
\t \t "top":0, //mouse position y 
 
\t \t "left":0, //mouse position x 
 
\t \t "z-index":"100000", 
 
\t \t "border":"0px", 
 
\t \t "width": $("#datepick"+objekt+"").css("width"), 
 
\t \t "height": $("#datepick"+objekt+"").css("height"), 
 
\t \t "font-family": "Lucida Sans Unicode" 
 
\t }); 
 

 
\t tobj.datepicker({ 
 
\t \t \t showButtonPanel: true, 
 
\t \t \t dateFormat: "yy-mm-dd", \t 
 
\t \t \t firstDay: 1, 
 
\t \t \t regional: sprache, 
 
\t \t \t changeMonth: true, 
 
\t \t \t showWeek: true, 
 
\t \t \t minDate: miniDat, 
 
\t \t \t maxDate: maxiDat, 
 
\t \t \t onClose: function() 
 
\t \t \t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t \t \t tobj.remove(); 
 
\t \t \t \t \t \t \t \t } 
 
\t \t }); 
 
\t 
 
\t tobj.change(function() 
 
\t \t { 
 
\t \t \t 
 
\t \t \t ARCPLAN.arcclient.acSendInputEvent(dateiname, objekt, tobj.val(), 1, 1); 
 
\t \t \t tobj.remove(); 
 
\t \t } 
 
\t); 
 
\t 
 
\t tobj.mouseover(function() 
 
\t \t { 
 
\t \t \t $('#dummy_'+objekt+'').focus(); 
 
\t \t } 
 
\t); \t 
 
\t tobj.mouseout(function() 
 
\t \t { 
 
\t \t \t $('#dummy_'+objekt+'').focus(); 
 
\t \t } 
 
\t); 
 
\t $('#dummy_'+objekt+'').focus(); 
 

 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <div class="arcComponentContainer" tabindex="-1" style="z-index: 70;left: 938px;top: 138px;width: 16px;height: 16px"><button style="background-color:rgba(255,255,255,0.0);border-top-width:0px;border-bottom-width:0px;border-left-width:0px;border-right-width:0px;border-top-color:rgba(230, 230, 230, 0.75);border-bottom-color:rgba(130, 130, 130, 0.75);border-left-color:rgba(230, 230, 230, 0.75);border-right-color:rgba(130, 130, 130, 0.75);border-style:outset;font-family:'Arial';font-size:9pt;font-weight:normal;font-style:normal;text-decoration:none;color:#000000;text-align:center;cursor:pointer;" class="arcButton" tabindex="0"><img width="16px" height="16px" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0&#10;d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9i&#10;ZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2Vo&#10;aUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6&#10;bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0&#10;LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpS&#10;REYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJk&#10;Zi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIg&#10;eG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8i&#10;IHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5&#10;cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5j&#10;b20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzNEOEQx&#10;RjI1NUZFMTFFNTgxODE4NTlGNjhGRTk1MDUiIHhtcE1NOkluc3RhbmNlSUQ9&#10;InhtcC5paWQ6QzNEOEQxRjE1NUZFMTFFNTgxODE4NTlGNjhGRTk1MDUiIHht&#10;cDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3Mi&#10;PiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmRp&#10;ZDpGQUFCRkZGNkZENTVFNTExQUFGNzg4RkI3MkM3NUQzOCIgc3RSZWY6ZG9j&#10;dW1lbnRJRD0ieG1wLmRpZDpGQUFCRkZGNkZENTVFNTExQUFGNzg4RkI3MkM3&#10;NUQzOCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1w&#10;bWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqxYR5gAAABqSURBVHjaYvz//z8D&#10;AwPjpHNA8n+eEQMGQJYCshkhGogEQA1MDCQCkjWwwF1JEEC8QbGTgMZATMJk&#10;UOAHzFDHyoC5ARgPE8/+BwOCDCBJspNAMU18sCJimmDgUBxKhAMHWQNWq3EB&#10;gAADAL5DXK0N5uLcAAAAAElFTkSuQmCC&#10;"></button></div> 
 
</body>

Antwort

1

Sie können nur die Maus verfolgen ein Maus-Event-Handler-Koordinaten in, so würde ich vorschlagen, eigene erstellen und speichern Sie die Maus in einer globalen Variablen Koordinaten:

var mouse = { x:0, y: 0 }; 
document.addEventListener('mousemove', function (e) { 
    mouse.x = e.clientX; 
    mouse.y = e.clientY; 
}); 

Dann können Sie in Ihrem Code auf mouse.x und mouse.y verweisen. Die Koordinaten sind relativ zum Dokument.

Für die Position tobj Einstellung:

tobj.style.left = mouse.x + 'px'; 
tobj.style.top = mouse.y + 'px'; 

Natürlich müssen Sie sicherstellen, dass tobj bewegt werden kann. Um dies zu erreichen, müssen Sie möglicherweise einige CSS, um es anzuwenden:

style="position: absolute; display: block" 
+0

im Moment die Funktion leitet er die Koordinaten zwischengespeichert werden müssen. die Maus darf sich danach bewegen – eltonkamami

+0

@eltonkamami: Welche Funktion? Der 'mousemove'-Ereignishandler? Es speichert die Koordinaten; das ist der springende Punkt, nein? – trincot

+0

von OP 'Ich versuche, die Pixelkoordinaten der Mausposition während eines Aufrufs einer Funktion (exe_datepicker)' obwohl nicht sicher, ob Zugriff auf diese Funktion zur Verfügung gestellt wird und keine Bibliothek ist – eltonkamami

0

sind Sie sicher, dass der Rahmen nicht auch Sie ein Event-Objekt zu geben? in Fall sollten Sie in der Lage sein, ganz leicht Mausposition Versteh http://www.w3schools.com/jsref/event_clientx.asp

+0

Hallo, um ehrlich zu sein, weiß ich nicht welche Objekte verfügbar sind. Zu viele, um meine begrenzten Fähigkeiten zu analysieren. – rasenkantenstein

+0

haben Sie versucht, einen Haltepunkt im Click Callback und beobachten Parameter 'Ereignis' ?, statt pageX wahrscheinlich clientX/Y-Eigenschaften sollten verwendet werden [siehe meinen Link]. Einstellung eines eventlistener auf mousemove verwendet eine Menge CPU-Zeit, ich würde es vermeiden – user1555320

+0

Es gibt in der Tat einige Sachen beim Hinzufügen eines Breakpoints. Leider bin ich zu viel Anfänger, um daraus etwas zu machen. Ich sehe das in der Chrome-Konsole. Es gibt einen lokalen Bereich und einen globalen Bereich. Innerhalb des lokalen gibt es eine Ebene b mit einem Ereignis, das meine Wünsche koordiniert enthält. Keine Ahnung, wie das gemeint ist. Innerhalb der globalen Hierarchie gibt es auch einen Event-Knoten, der den gewünschten clientX-Wert enthält. Auch ich weiß nicht, wie man das bezeichnet. Wenn ich nur event.clientX verwende, wird ein undefinierter Wert zurückgegeben. – rasenkantenstein

0

dank Ihrer Hilfe konnte ich meinen Wunsch erfüllen eine jQuery Datepicker in unserem Reporting-Anwendung zu haben ;-) Die unten Javascript Teil a benutzerdefinierte Javascript-Datei, die mit all den anderen Sachen geladen wird.

//New part suggested here 
 

 
var mouse = { x:0, y: 0 }; 
 
document.addEventListener('click', function (e) { //Taking into account User's remark about CPU time here. Plus no more lagging between opening the function and displaying the datepicker 
 
    mouse.x = e.clientX; 
 
    mouse.y = e.clientY; 
 
}); 
 

 
//Ausführen des Datepickers aus Arcplan heraus via STARTENJS 
 
function exe_datepicker(objekt,dateiname,sprache,miniDat,maxiDat) { 
 
\t $.datepicker.setDefaults($.datepicker.regional[ "" ]); 
 
\t $.datepicker.setDefaults($.datepicker.regional[ sprache ]); 
 
\t $('<input type="text" id="dummy_'+objekt+'" name="dummy_'+objekt+'" readonly="readonly">').appendTo("body"); 
 

 
\t //alert(mouse.x + ' ' + mouse.y); 
 
\t 
 
\t var tobj = $('#dummy_'+objekt+''); 
 
\t 
 
\t \t tobj.css({ 
 
\t \t "position":"absolute", 
 
\t \t "top":mouse.y, //mouse position y 
 
\t \t "left":mouse.x, //mouse position x 
 
\t \t "z-index":"100000", 
 
\t \t "border":"0px", 
 
\t \t "width": "1px", 
 
\t \t "height": "1px", 
 
\t \t "visiblity":"hidden", 
 
\t \t "font-family": "Lucida Sans Unicode" 
 
\t }); 
 

 
\t tobj.datepicker({ 
 
\t \t \t showButtonPanel: true, 
 
\t \t \t dateFormat: "yy-mm-dd", \t 
 
\t \t \t firstDay: 1, 
 
\t \t \t regional: sprache, 
 
\t \t \t changeMonth: true, 
 
\t \t \t showWeek: true, 
 
\t \t \t minDate: miniDat, 
 
\t \t \t maxDate: maxiDat, 
 
\t \t \t onClose: function() 
 
\t \t \t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t \t \t tobj.remove(); 
 
\t \t \t \t \t \t \t \t } 
 
\t \t }); 
 
\t 
 
\t tobj.change(function() 
 
\t \t { 
 
\t \t \t 
 
\t \t \t ARCPLAN.arcclient.acSendInputEvent(dateiname, objekt, tobj.val(), 1, 1); 
 
\t \t \t tobj.remove(); 
 
\t \t } 
 
\t); 
 
\t 
 
\t tobj.mouseover(function() 
 
\t \t { 
 
\t \t \t $('#dummy_'+objekt+'').focus(); 
 
\t \t } 
 
\t); \t 
 
\t tobj.mouseout(function() 
 
\t \t { 
 
\t \t \t $('#dummy_'+objekt+'').focus(); 
 
\t \t } 
 
\t); 
 
\t $('#dummy_'+objekt+'').focus(); 
 

 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Verwandte Themen