2016-08-30 2 views
1

Ich benutze phantomjs zu kratzen und krabbeln auf Websites und ich bin zu einer Seite gekommen, wo, um die Zeitfenster während eines Tages für ein Ereignis in einem Kalender zu buchen, ich Klicken Sie auf, halten Sie die Maustaste gedrückt und bewegen Sie die Maus über alle Zeitfenster, die Sie während des Events belegen möchten. Der Tag ist eine Tabellenzeile und die Slots sind in Tabellenspalten mit zufällig generierten IDs, so;Javascript zum Klicken und Ziehen über Elemente

<tr class="day" id="monday"> 
    <td class="slot" id="randomly-generated-id">Morning</td> 
    <td class="slot" id="randomly-generated-id">Lunch</td> 
    <td class="slot" id="randomly-generated-id">Afternoon</td> 
    <td class="slot" id="randomly-generated-id">Night</td> 
</tr> 

Ich mag den ganzen Tag für die Veranstaltung und in einem normalen, grafischen Browser-Buchung dies durch einen Klick auf dem frühesten Slot erfolgt und Ziehen mit der Maus über die einzelne Schlitz, die Sie für diese besondere Veranstaltung buchen mögen. Wie würden Sie einen solchen Befehl in Javascript auslösen? jQuery könnte auch funktionieren.

Antwort

1

gegabelt ich einen anderen Personen Lösung und zwickte es an Ihre Bedürfnisse anpassen konnte aber nur das Beispiel bekommen, etwas zu arbeiten, aber Tabellen (tr td), es überprüfen unsere hier:

http://jsfiddle.net/dcantato/fzkgLq6h/

Diese vollbringt, was Sie wollen, und ich persönlich bevorzuge es, mit Divs über Tabellen zu arbeiten. Die Hauptsache Sie weg von diesem nehmen möchten, wenn Sie Ihre eigene Funktion neu schreiben ist

window.getSelection(); 

und

document.selection.createRange(); 

Es gibt ein paar komplizierteren Dinge ist in diesem gut geschriebenen Code los aber von diesen Bausteinen kannst du es umschreiben.

+0

Ich werde es ausprobieren, aber ich kann nicht helfen, dass der Kalender eine Tabelle ist, seit ich es nicht geschrieben habe. Ich krabbele nur darauf herum. – pimmen

+0

Ich hatte eine Ahnung und aktualisierte die Tabelle, es scheint, dass es anfänglich nicht funktionierte, weil es das Tabellen-Tag in der HTML fehlte. Siehe die gleiche Geige aktualisiert. –

Verwandte Themen