0.8.25<\/a>) disponibiliza\u00a0 no seu lado cliente web, algumas ferramentas que facilitam o uso de dita interface.\u00a0 Observe o exemplo imperfeito seguinte:<\/p>\n<html>\r\n <script src='http:\/\/localhost\/YeAPF\/yloader.js'><\/script>\r\n <style>\r\n\u00a0\u00a0\u00a0 .hightlight {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 background: #FFFF98;\r\n\u00a0\u00a0\u00a0 }\r\n\u00a0 <\/style>\r\n <body>\r\n <div droppable<\/strong>='yes' \r\n style='border: solid 1px black; width: 400px; height: 200px; float:left'\r\n id=areaDestino>\r\n Solte os elementos aqui\r\n <\/div>\r\n <div style='width: 400px; float:left'>\r\n <ul>\r\n <li draggable<\/strong>=yes>Primeira coisa<\/li>\r\n <li draggable<\/strong>=yes id=coisa2>Segunda coisa<\/li>\r\n <li draggable<\/strong>=yes id=coisa3>Terceira coisa<\/li>\r\n <\/ul> \r\n <\/div>\r\n <\/body>\r\n <script>\r\n var areaDestino<\/em> = document.getElementById('areaDestino');\r\n areaDestino<\/em>.ondrop<\/strong> = function(aDraggedElement) {\r\n alert(\"Recebi \"+aDraggedElement.innerHTML);\r\n }\r\n areaDestino<\/em>.ondragover<\/strong> = function(aDraggedElement) {\r\n return aDraggedElement.id!='coisa2';\r\n }\r\n <\/script>\r\n<\/html><\/pre>\nBom, o exemplo \u00e9 imperfeito porque qualquer um pode ver que n\u00e3o inclui o DOCTYPE nem o HEAD e por ai vai…<\/p>\n
O que o programador precisa aprender \u00e9 o seguinte:<\/p>\n
\n- Todo elemento que possa ser um destino e receber outros elementos sendo arrastados, tem que ter um atributo droppable<\/em><\/strong> em yes<\/strong>.<\/li>\n
- Todo elemento que possa ser arrastado, tem que ter um atributo draggable<\/strong><\/em> em yes<\/strong>.<\/li>\n
- Existe um estilo global chamado highlight que ser\u00e1 usado para marcar alvos dispostos a receber o elemento arrastado.<\/li>\n
- Os elementos destino podem ter duas fun\u00e7\u00f5es: ondrop() e ondragover().\u00a0 A ondrop<\/strong>() ser\u00e1 chamada na hora do usu\u00e1rio soltar o elemento sobre o destino. \u00a0 E a ondragover<\/strong>() ser\u00e1 chamada cada vez que o usu\u00e1rio estiver arrastando um elemento sobre o outro.\u00a0 Ela deve devolver true<\/strong> se o objeto sendo arrastado pode ser jogado sobre o destino.<\/li>\n<\/ol>\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
As interfaces gr\u00e1ficas facilitam a vida do usu\u00e1rio… e complicam a do programador.\u00a0 Sou da ideia que a solu\u00e7\u00e3o de qualquer problema por vias computacionais tem um certo “peso” que precisa ser distribu\u00eddo hora carregando mais o usu\u00e1rio ora carregando mais a equipe de programa\u00e7\u00e3o.\u00a0 Quando melhor for o servi\u00e7o do programador, tanto menos dores […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[],"tags":[],"jetpack_featured_media_url":"","jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p5O6UV-m","jetpack-related-posts":[{"id":39,"url":"http:\/\/www.yeapf.com\/wp\/?p=39","url_meta":{"origin":22,"position":0},"title":"Ajax com YeAPF","date":"mar\u00e7o 3, 2014","format":false,"excerpt":"Pretendo deixar cada uma das postagens o mais simples poss\u00edvel.\u00a0 Mas, n\u00e3o \u00e9 poss\u00edvel proceder com este se antes voc\u00ea n\u00e3o instalou e configurou seu ambiente de desenvolvimento e o YeAPF.\u00a0 Este post (http:\/\/inovacaosistemas.com.br\/wp\/?p=25) lhe pode ajudar a fazer isso, caso n\u00e3o o tenha feito ainda. Introdu\u00e7\u00e3o Nos prim\u00f3rdios da\u2026","rel":"","context":"Post similar","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":184,"url":"http:\/\/www.yeapf.com\/wp\/?p=184","url_meta":{"origin":22,"position":1},"title":"Exemplo - web01 - OnePage YeAPF Web Application","date":"dezembro 26, 2014","format":false,"excerpt":"Esta \u00e9 uma das continua\u00e7\u00f5es deste artigo. Por que criar aplicativos mono p\u00e1gina? Bom, a grande virtude de um aplicativo mono p\u00e1gina \u00e9 que tudo o que voc\u00ea precisar est\u00e1 pronto assim que o usu\u00e1rio carregou a p\u00e1gina inicial e caso sejam necess\u00e1rias mais p\u00e1ginas, formul\u00e1rios, tabelas elas tamb\u00e9m podem\u2026","rel":"","context":"Em "Desenvolvimento"","img":{"alt_text":"","src":"https:\/\/i2.wp.com\/www.yeapf.com\/wp\/wp-content\/uploads\/2019\/05\/office-932926_1920.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":288,"url":"http:\/\/www.yeapf.com\/wp\/?p=288","url_meta":{"origin":22,"position":2},"title":"Um ambiente de desenvolvimento YeAPF usando Windows","date":"mar\u00e7o 28, 2016","format":false,"excerpt":"Quase que todas as vezes que postamos alguma coisa o fazemos tomando como base uma instala\u00e7\u00e3o Linux. Por\u00e9m, na medida em que alguns novos usu\u00e1rios est\u00e3o ainda usando Windows, se torna necess\u00e1rio um pequeno roteiro para facilitar a vida. Escrevemos estas linhas tomando como base uma instala\u00e7\u00e3o sobre XP (Obvio\u2026","rel":"","context":"Em "Desenvolvimento"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":361,"url":"http:\/\/www.yeapf.com\/wp\/?p=361","url_meta":{"origin":22,"position":3},"title":"Um administrador simples de chaves","date":"junho 29, 2017","format":false,"excerpt":"Muitas vezes \u00e9 necess\u00e1rio vincular um dispositivo com um servi\u00e7o de forma tal que o dispositivo tenha permiss\u00e3o de lan\u00e7ar dados dentro do servi\u00e7o. O YePAF inclui um exemplo na pasta samples\/key-admin que pode ser usado como modelo para criar seus pr\u00f3prios gestores de chaves de forma tal que um\u2026","rel":"","context":"Em "Desenvolvimento"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":304,"url":"http:\/\/www.yeapf.com\/wp\/?p=304","url_meta":{"origin":22,"position":4},"title":"Tarefas de longa dura\u00e7\u00e3o utilizando YeAPF","date":"junho 2, 2016","format":false,"excerpt":"Uma das vantagens de YeAPF ser orientado \u00e0 cria\u00e7\u00e3o de aplicativos chamados apenas por API \u00e9 a uniformiza\u00e7\u00e3o da chamada. Com isso estamos dizendo que todas as chamadas s\u00e3o feitas do mesmo jeito com o que o programador pode esquecer de como inventou a roda da \u00faltima vez, j\u00e1 que\u2026","rel":"","context":"Em "Desenvolvimento"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":392,"url":"http:\/\/www.yeapf.com\/wp\/?p=392","url_meta":{"origin":22,"position":5},"title":"Gerando um formul\u00e1rio para CRUD a partir de um select","date":"abril 30, 2018","format":false,"excerpt":"Esses dias me deparei com a necessidade de produzir um formul\u00e1rio cujos campos n\u00e3o s\u00e3o produto de uma tabela \u00fanica mas sim de um\u00a0left join.\u00a0 Para uma tabela \u00fanica, o comando \u00e9 o seguinte ~\/www\/YeAPF\/tools\/ydbcreateform --db 192.168.56.250:nossoConsultorio_teste --user esteban --pass senha --type mysqli --table clinicas --name \"clinicas\" Ai modifiquei o\u2026","rel":"","context":"Em "Desenvolvimento"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"http:\/\/www.yeapf.com\/wp\/index.php?rest_route=\/wp\/v2\/posts\/22"}],"collection":[{"href":"http:\/\/www.yeapf.com\/wp\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.yeapf.com\/wp\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.yeapf.com\/wp\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.yeapf.com\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=22"}],"version-history":[{"count":1,"href":"http:\/\/www.yeapf.com\/wp\/index.php?rest_route=\/wp\/v2\/posts\/22\/revisions"}],"predecessor-version":[{"id":23,"href":"http:\/\/www.yeapf.com\/wp\/index.php?rest_route=\/wp\/v2\/posts\/22\/revisions\/23"}],"wp:attachment":[{"href":"http:\/\/www.yeapf.com\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=22"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.yeapf.com\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=22"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.yeapf.com\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=22"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}