How to add or modify my jquery for multiple selection to this javascript? -

-

issue

i want able touch screen , drag finger across surface , select multiple boxes. want same thing mouse, hold down mouse , drag across whatever want select. because of this, thinking implement in jquery/jquery mobile have behavior out of box?

code

here working sample of have working far.

  • built table , able select specific elements color (and ignore another)
  • able select row or colum. able unselect.
  • able select entire table or unselect (by color).

attempts

i tried using jquery ui. specifically, jquery selectable api, breaks existing code , buggy. took @ found here, dependent on desktop approach using shift , control. tried add select attribute <td> elements , use multiple select. didn't think hack work, @ least wanted try it. finally, looked @ stackoverflow , seems wants checkboxes or keyboard.

again, need way able select multiple boxes/grids aka elements in grid touching screen , dragging across whatever wish select or same mouse.

edit question, similar not need. same use case, applied both mouse event + touch events.

any suggestions, clues, hints, or more appreciated have thrown , kitchen sink @ this. feel this.

i combined this answer this one , seems work both on desktop , on mobile (code bit ugly, sorry that).

how works

every <td> on table listens both normal mouse events (up/down/move) , touch events (start/end/move).

on mousedown/touchstart motion becomes "active", selection reset (removing .highlight class) , current event element selected.

the trick in touchmove event: since $(this) refers element touch event started, have see user touching passing event coordinates highlighthoveredobject, select right element.

jsfiddle

javascript

function highlighthoveredobject(x, y) {     $('td').each(function() {       // check if inside boundaries       if (!(           x <= $(this).offset().left || x >= $(this).offset().left + $(this).outerwidth() ||           y <= $(this).offset().top  || y >= $(this).offset().top + $(this).outerheight()       )) {          $(this).addclass('highlight');       }     }); }  // if using jquery mobile replace next line // $("#yourpage").on("pagecreate", function() {  $(document).ready(function() {        var active = false;      $("td").on("mousedown", function(ev) {         active = true;         $(".highlight").removeclass("highlight"); // clear previous selection         ev.preventdefault(); // prevents text selection happening         $(this).addclass("highlight");     });      $("td").on("mousemove", function(ev) {         if (active) {             $(this).addclass("highlight");         }     });      $(document).on("mouseup", function(ev) {         active = false;     });      $("td").on("touchstart", function(ev) {         active = true;         $(".highlight").removeclass("highlight"); // clear previous selection         ev.preventdefault(); // prevents text selection happening         $(this).addclass("highlight");     });      $("td").on("touchmove", function(ev) {         if (active) {             var touch = ev.originalevent.touches[0];             highlighthoveredobject(touch.clientx, touch.clienty);         }     });      $(document).on("touchend", function(ev) {         active = false;     });  });

html

<table border="1" width="100%">     <tbody><tr>         <td>1</td>         <td>2</td>         <td>3</td>     </tr>     <tr>         <td>1</td>         <td>2</td>         <td>3</td>     </tr>     <tr>         <td>1</td>         <td>2</td>         <td>3</td>     </tr> </tbody></table>

css

.highlight { background-color:#ccffcc; }

Comments

Post a Comment

Popular posts from this blog

c++ - No viable overloaded operator for references a map -

-
i trying use map can make tag names reference number. when try , use it, in code error (6 in total every time reference map): src/main.cpp:25:45: error: no viable overloaded operator[] type 'std::map<std::string, std::string>' const char* idcs = node.child_value(tagmap[3]); this code: #include "pugi/pugixml.hpp" #include <iostream> #include <string> #include <map> int main() { pugi::xml_document doca, docb; std::map<std::string, pugi::xml_node> mapa, mapb; std::map<std::string, std::string> tagmap {{"1", "data"}, {"2", "entry"}, {"3", "id"}, {"4", "content"}}; if (!doca.load_file("a.xml") || !docb.load_file("b.xml")) { std::cout << "can't find input files"; return 1; } (auto& node: doca.child(tagmap[1]).children(tagmap[2])) { co
Read more

java - Custom OutputStreamAppender not run: LOGBACK: No context given for <MYAPPENDER> -

-
i wish write custom appender on basis of outputstreamappender . wrote following class package tests; import java.io.ioexception; import java.io.outputstream; import ch.qos.logback.core.outputstreamappender; public class myappender<e> extends outputstreamappender<e> { public myappender() { system.out.println("myappender created"); setoutputstream(new outputstream() { @override public void write(int b) throws ioexception { throw new unsupportedoperationexception(); } }); } } then wrote following runner: package tests; import org.slf4j.loggerfactory; import ch.qos.logback.classic.logger; public class runner { private static final logger log = (logger) loggerfactory.getlogger(runner.class); public static void main(string[] args) { //log.addappender(new myappender<iloggingevent>()); log.info("hello world"); } } finall
Read more

java - Cannot secure connection using TLS -

-
i'm trying establish secure socket connection between java client applet (built jdk 1.7.0_75-b13) , vc++ server application. as test vehicle, used vc++ client/server sample found in msdn forums, modified use schannel , able establish socket using cipher suite tls_rsa_with_aes_128_cbc_sha. works of tls 1.0/1.1/1.2. when try opening socket java applet same server application, connection rejected server reporting following: tls 1.0 acceptsecuritycontext failed: 0x80090327 tls 1.1 acceptsecuritycontext failed: 0x80090331 tls 1.2 acceptsecuritycontext failed: 0x80090331 this java code used create socket: debugprint("setting secure connection"); sslsocketfactory sslsocketfactory = (sslsocketfactory) sslsocketfactory.getdefault(); sslsocket sslsocket = (sslsocket) sslsocketfactory.createsocket("127.0.0.1", socketnumber); debugprint("starting handshake"); sslsocket.settcpnodelay(true); sslsocket.setsolinger(false, 0); sslsocket.s
Read more