javascript - jQuery: Counter for draggables (again!) -

-

this follow of post:

jquery drag , drop count content of drop area?

i'm rather new programming so, apologies dull question. trying count number of draggable elements dropped in a droppable. rather initialising count variable @ 0 , increase/decrease count each time draggable drops in droppable area, trying (potentially) less troublesome strategy of try counting total number of pills in droppable. i've tried ".count()", ".length" no success... here code. suggestions?

<!doctype html> <html> <head>     <title>my page</title>      <meta charset="utf-8">       <script type="text/javascript" src="js/jquery-1.11.2.js"></script>     <script src="js/jquery-ui.js"></script>     <script src="js/jquery.ui.touch-punch.js"></script>      <meta name="viewport" content="width=device-width, initial-scale=1">     <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">     <script src="bootstrap/js/bootstrap.min.js"></script>       <style>           .fish  {              margin:.5em;             font-size:1.2em;             position:relative;             display:inline-block;             -webkit-box-sizing:border-box;             -moz-box-sizing:border-box;             box-sizing:border-box;             border-radius: 50%;              width: 40px;             height: 40px;              background: #bab6b2;             float: left;             border:.3em  solid #4b027c ;         }          .cloth {             width: 100%;             height: 210px;              border-radius: 15px;             border: 5% solid rgba(200,0,0,.5);              background-color:white;             background-image: linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 50%),             linear-gradient(rgba(200,0,0,.5) 50%, transparent 50%);             background-size:20px 20px;         }        </style>      <script type="text/javascript">     $(init);           function init() {             var j = 0;             $("#counter").find("h1").html("you keep: " + j);              $(".fish").draggable({                 addclasses: true,             });              $(".cloth").droppable({                 accept: ".fish",                 tolerance: "fit",                 drop: function( event, ui ) {                      j = $(".cloth  .fish").length;                     $("#counter").find("h1").html("you keep: " + j);                  },                  out: function(){                      j = $(" .cloth .fish ").length;                     $("#counter").find("h1").html("you keep: " + j);                  }              });            }     </script>   </head> <body>       <div class="container">           <div  id= "counter"><h1>you keep: 0</h1></div>           <div class="cloth" ></div>           <div class = "row ">             <div class="fish" ></div>             <div class="fish" ></div>             <div class="fish" ></div>             <div class="fish" ></div>             <div class="fish" ></div>          </div>         <div class ="row ">         <div class="fish" ></div>         <div class="fish" ></div>         <div class="fish" ></div>         <div class="fish" ></div>         <div class="fish" ></div>         </div>        </div>   <button type="button" class="btn btn-primary footpage" >send!</button>  </body> </html>

your logic works, there's 1 thing missing: you're never adding .fish .cloth div. dropping doesn't mean it's added droppable, means can drop on element , events related. if want add them have append them. mean modifying bit css , adding behavior deal relative positioning vs absolute. , out doesn't mean remove elements, means go out of droppable region. can replace part also. this:

function init() {     var j = 0;     $("#counter").find("h1").html("you keep: " + j);      $(".fish").draggable({         addclasses: true,         refreshpositions: true,         //when start dragging append body remove         // cloth div         start: function (e, ui) {             ui.helper.appendto('body');         },         //you move out logic stop. if element hasn't been added         // cloth, won't counter         stop: function (e, ui) {             j = $(".cloth  .fish").length;             $("#counter").find("h1").html("you keep: " + j);         }      });      $(".cloth").droppable({         accept: ".fish",         tolerance: "fit",         drop: function (event, ui) {             //on drop append fish cloth div it's counted             $('.cloth').append(ui.helper.css({                 position: 'absolute',                 top: ui.helper.offset().top,                 left: ui.helper.offset().left             }));             j = $(".cloth  .fish").length;             $("#counter").find("h1").html("you keep: " + j);          },       });    }

and css:

.ui-draggable-dragging {     position: absolute; }

fiddle: https://jsfiddle.net/nl3axfd2/8/

that said, i'd previous answer, working classes might simplify lot whole thing.


Comments

Post a Comment

Popular posts from this blog

PHP DOM loadHTML() method unusual warning -

-
i had following code works fine on localhost: $document = new domdocument(); $document->loadhtml($p_result); $form = $document->getelementsbytagname('form')->item(0); // code continues using $form variable after same code updated on outside server, loadhtml() failed , issued warning. warning: domdocument::loadhtml() expects parameter 1 valid path, string given in path/name/to/script.php returned null instead of object code pretty gets fatal error. note contents of $p_result absolutely same on outside server , on localhost. but why displays kind of warning , why not work? doesn't loadhtml() expects argument 1 string in first place? why method expects parameter 1 valid path ? just make clear i'm not calling loadhtmlfile() , i'm calling loadhtml() . thanks. you're affected one of php bugs . issue present in php 5.6.8 , 5.6.9. have affected php version on server, , bug-free version on localhost. the bug forbids null
Read more

python - How to create jsonb index using GIN on SQLAlchemy? -

-
here's current code creating index jsonb. index("mytable_data_idx_id_key", mytable.data['id'].astext, postgresql_using='gin') but got error. sqlalchemy.exc.programmingerror: (psycopg2.programmingerror) data type text has no default operator class access method "gin" hint: must specify operator class index or define default operator class data type. [sql: "create index event_data_idx_id_key on event using gin ((data ->> 'id'))"] is there way create index on sqlalchemy? the postgresql specific sqlalchemy docs @ http://docs.sqlalchemy.org/en/latest/dialects/postgresql.html#operator-classes mention postgresql_ops dictionary provide "operator class" used postgresql, , provide example illustrating use: index('my_index', my_table.c.id, my_table.c.data, postgresql_ops={ 'data': 'text_pattern_ops',
Read more

c# - TransactionScope not rolling back although no complete() is called -

-
i'm using transactionscope rollback transaction fail bool errorreported = false; action<importerrorlog> newerrorcallback = e => { errorreported = true; errorcallback(e); }; using (var transaction = new transactionscope()) { foreach (importtaskdefinition task in taskdefinition) { loader.load(streamfile, newerrorcallback, task.destinationtable, processingtaskid); } if (!errorreported) transaction.complete(); } i'm sure there no transactionscope started ahead or after code. i'm using entity framework insert in db. regardless state of errorreported transaction never rolled in case of error. what missing ? transactionscope sets transaction.current . that's does. wants transacted must @ property. i believe ef each time connection opened reason. probably, connection open when scope installed. open connection inside of scope or enlist manually. ef has nasty "design decision": default opens
Read more