{"id":290,"date":"2019-03-25T17:30:09","date_gmt":"2019-03-25T20:30:09","guid":{"rendered":"http:\/\/xexeu.elipse.com.br\/pt\/como-utilizar-arrastaresoltar-draganddrop-no-e3\/"},"modified":"2019-04-26T16:09:16","modified_gmt":"2019-04-26T19:09:16","slug":"como-utilizar-arrastaresoltar-draganddrop-no-e3","status":"publish","type":"post","link":"https:\/\/kb.elipse.com.br\/en\/como-utilizar-arrastaresoltar-draganddrop-no-e3\/","title":{"rendered":"Como utilizar arrastar-e-soltar (drag-and-drop) no E3."},"content":{"rendered":"<div style=\"text-align: justify;\">\n<p>Embora o E3 n\u00e3o possua nenhum evento espec\u00edfico para tratar essa funcionalidade com os objetos de tela (primitivas gr\u00e1ficas, ActiveX, XControl de usu\u00e1rio, etc), este recurso pode ser desenvolvido facilmente. Este artigo mostra como implementar o recurso de arrastar-e-soltar para a transfer\u00eancia de informa\u00e7\u00f5es de um objeto a outro.<\/p>\n<p><span style=\"font-weight: bold;\">Defini\u00e7\u00f5es<\/span><\/p>\n<p>Um evento de arrastar-e-soltar pode ser dividido em tr\u00eas a\u00e7\u00f5es: um clique cont\u00ednuo, o movimento do mouse, e o fim do clique (quando o objeto est\u00e1 na posi\u00e7\u00e3o final a ser alcan\u00e7ada). Como o E3 n\u00e3o suporta o evento de arrastar-e-soltar, esta tarefa ser\u00e1 dividida em tr\u00eas etapas para que seja poss\u00edvel criar o tratamento para esse evento. Para implementar esse recurso, \u00e9 necess\u00e1rio:<\/p>\n<ul>\n<li>Determinar quais objetos da tela ser\u00e3o o ponto de partida do evento.<\/li>\n<li>Definir previamente quais as propriedades a serem transferidas.<\/li>\n<li>Estabelecer quais os poss\u00edveis objetos a serem utilizados como destino.<\/li>\n<\/ul>\n<p><span style=\"font-weight: bold;\">Exemplo<\/span>: em um menu com tr\u00eas fontes de v\u00eddeo quaisquer, existem duas \u00e1reas de exibi\u00e7\u00e3o de v\u00eddeo, sendo que qualquer uma delas pode mostrar todas as op\u00e7\u00f5es de fonte, e a configura\u00e7\u00e3o \u00e9 feita pelo usu\u00e1rio que estiver logado. Neste caso, \u00e9 poss\u00edvel utilizar o recurso de arrastar-e-soltar uma fonte qualquer de v\u00eddeo em uma das duas \u00e1reas de exibi\u00e7\u00e3o dispon\u00edveis. Conforme foi visto anteriormente, teremos como ponto de partida as op\u00e7\u00f5es de v\u00eddeo e como destino a \u00e1rea de exibi\u00e7\u00e3o. As propriedades a serem transferidas podem ser o nome da fonte, o n\u00famero da c\u00e2mera ou qualquer outra que possibilite que o v\u00eddeo correto seja mostrado.<\/p>\n<p><span style=\"font-weight: bold;\">Eventos<\/span><\/p>\n<p>Para implementar as tr\u00eas etapas do evento de arrastar-e-soltar, devem ser utilizados tr\u00eas eventos nos objetos do E3:<\/p>\n<ol>\n<li><span style=\"font-weight: bold;\">Clique<\/span>: para esta etapa, utilize o evento <span style=\"font-style: italic;\">MouseDown <\/span>do objeto-fonte. Nesse evento, deve-se capturar atrav\u00e9s de scripts todas as propriedades desejadas, enviando-as para tags internos, objetos de dados (XObject) desenvolvido para receber esses dados, etc.<\/li>\n<li><span style=\"font-weight: bold;\">Soltar o bot\u00e3o<\/span>: no objeto-destino, o evento <span style=\"font-style: italic;\">MouseUp <\/span>deve fazer com que as propriedades desejadas recebam os valores capturados no evento <span style=\"font-style: italic;\">Click<\/span>.<\/li>\n<li><span style=\"font-weight: bold;\">Arrastar<\/span>: para detectar a chegada do mouse ao objeto-destino, deve-se utilizar um evento de usu\u00e1rio <span style=\"font-style: italic;\">OnMouseOver<\/span>, que deve ser criado com a propriedade <span style=\"font-style: italic;\">MouseOver <\/span>do pr\u00f3prio objeto (quando a propriedade for verdadeira). Nesse script, utilize o m\u00e9todo <span style=\"font-style: italic;\">SetFocus()<\/span>.<\/li>\n<\/ol>\n<p><span style=\"font-weight: bold;\">Considera\u00e7\u00f5es finais<\/span><\/p>\n<p>Depois de montados os tr\u00eas eventos, com seus respectivos scripts, basta executar o projeto e verificar as funcionalidades desenvolvidas. Embora possam haver algumas restri\u00e7\u00f5es neste m\u00e9todo (por exemplo, a falta de suporte a objetos MS-Forms), ele \u00e9 o suficiente para que este recurso seja implementado em um projeto.<\/p>\n<h3>Anexos:<\/h3>\n<p><a href=\"\/wp-content\/uploads\/2019\/03\/DragDrop.zip\">DragDrop<\/a><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Embora o E3 n\u00e3o possua nenhum evento espec\u00edfico para tratar essa funcionalidade com os objetos de tela (primitivas gr\u00e1ficas, ActiveX, XControl de usu\u00e1rio, etc),&#8230;.<br \/>\nAutor<br \/>\nPaulo Henrique Soares Maciel<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0},"categories":[617],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Como utilizar arrastar-e-soltar (drag-and-drop) no E3. - Elipse Knowledgebase<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kb.elipse.com.br\/en\/como-utilizar-arrastaresoltar-draganddrop-no-e3\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como utilizar arrastar-e-soltar (drag-and-drop) no E3.\" \/>\n<meta property=\"og:description\" content=\"Embora o E3 n\u00e3o possua nenhum evento espec\u00edfico para tratar essa funcionalidade com os objetos de tela (primitivas gr\u00e1ficas, ActiveX, XControl de usu\u00e1rio, etc),.... Autor Paulo Henrique Soares Maciel\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kb.elipse.com.br\/en\/como-utilizar-arrastaresoltar-draganddrop-no-e3\/\" \/>\n<meta property=\"og:site_name\" content=\"Elipse Knowledgebase\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/www.facebook.com\/elipsesoftware\" \/>\n<meta property=\"article:published_time\" content=\"2019-03-25T20:30:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-04-26T19:09:16+00:00\" \/>\n<meta name=\"author\" content=\"Elipse Software\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Elipse Software\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kb.elipse.com.br\/en\/como-utilizar-arrastaresoltar-draganddrop-no-e3\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kb.elipse.com.br\/en\/como-utilizar-arrastaresoltar-draganddrop-no-e3\/\"},\"author\":{\"name\":\"Elipse Software\",\"@id\":\"https:\/\/kb.elipse.com.br\/#\/schema\/person\/def69ea453ea60b250497b89225a9f87\"},\"headline\":\"Como utilizar arrastar-e-soltar (drag-and-drop) no E3.\",\"datePublished\":\"2019-03-25T20:30:09+00:00\",\"dateModified\":\"2019-04-26T19:09:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kb.elipse.com.br\/en\/como-utilizar-arrastaresoltar-draganddrop-no-e3\/\"},\"wordCount\":467,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kb.elipse.com.br\/#organization\"},\"articleSection\":[\"Outros\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kb.elipse.com.br\/en\/como-utilizar-arrastaresoltar-draganddrop-no-e3\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kb.elipse.com.br\/en\/como-utilizar-arrastaresoltar-draganddrop-no-e3\/\",\"url\":\"https:\/\/kb.elipse.com.br\/en\/como-utilizar-arrastaresoltar-draganddrop-no-e3\/\",\"name\":\"[:pt]Como utilizar arrastar-e-soltar (drag-and-drop) no E3.[:] - Elipse Knowledgebase\",\"isPartOf\":{\"@id\":\"https:\/\/kb.elipse.com.br\/#website\"},\"datePublished\":\"2019-03-25T20:30:09+00:00\",\"dateModified\":\"2019-04-26T19:09:16+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/kb.elipse.com.br\/en\/como-utilizar-arrastaresoltar-draganddrop-no-e3\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kb.elipse.com.br\/en\/como-utilizar-arrastaresoltar-draganddrop-no-e3\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kb.elipse.com.br\/en\/como-utilizar-arrastaresoltar-draganddrop-no-e3\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/kb.elipse.com.br\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Como utilizar arrastar-e-soltar (drag-and-drop) no E3.\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kb.elipse.com.br\/#website\",\"url\":\"https:\/\/kb.elipse.com.br\/\",\"name\":\"Elipse Knowledgebase\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/kb.elipse.com.br\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kb.elipse.com.br\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kb.elipse.com.br\/#organization\",\"name\":\"Elipse Software\",\"url\":\"https:\/\/kb.elipse.com.br\/\",\"sameAs\":[\"http:\/\/www.facebook.com\/elipsesoftware\"],\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/kb.elipse.com.br\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kb.elipse.com.br\/wp-content\/uploads\/2019\/05\/schererelipse-com-br\/logoElipse.png\",\"contentUrl\":\"https:\/\/kb.elipse.com.br\/wp-content\/uploads\/2019\/05\/schererelipse-com-br\/logoElipse.png\",\"width\":161,\"height\":58,\"caption\":\"Elipse Software\"},\"image\":{\"@id\":\"https:\/\/kb.elipse.com.br\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/kb.elipse.com.br\/#\/schema\/person\/def69ea453ea60b250497b89225a9f87\",\"name\":\"Elipse Software\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/kb.elipse.com.br\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ff1f7ec38f4687b06f6851d97b3cd2d0?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ff1f7ec38f4687b06f6851d97b3cd2d0?s=96&d=mm&r=g\",\"caption\":\"Elipse Software\"},\"url\":\"https:\/\/kb.elipse.com.br\/en\/author\/webmasterelipse-com-br\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Como utilizar arrastar-e-soltar (drag-and-drop) no E3. - Elipse Knowledgebase","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kb.elipse.com.br\/en\/como-utilizar-arrastaresoltar-draganddrop-no-e3\/","og_locale":"en_US","og_type":"article","og_title":"[:pt]Como utilizar arrastar-e-soltar (drag-and-drop) no E3.[:] - Elipse Knowledgebase","og_description":"[:pt]Embora o E3 n\u00e3o possua nenhum evento espec\u00edfico para tratar essa funcionalidade com os objetos de tela (primitivas gr\u00e1ficas, ActiveX, XControl de usu\u00e1rio, etc),.... Autor Paulo Henrique Soares Maciel[:]","og_url":"https:\/\/kb.elipse.com.br\/en\/como-utilizar-arrastaresoltar-draganddrop-no-e3\/","og_site_name":"Elipse Knowledgebase","article_publisher":"http:\/\/www.facebook.com\/elipsesoftware","article_published_time":"2019-03-25T20:30:09+00:00","article_modified_time":"2019-04-26T19:09:16+00:00","author":"Elipse Software","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Elipse Software","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kb.elipse.com.br\/en\/como-utilizar-arrastaresoltar-draganddrop-no-e3\/#article","isPartOf":{"@id":"https:\/\/kb.elipse.com.br\/en\/como-utilizar-arrastaresoltar-draganddrop-no-e3\/"},"author":{"name":"Elipse Software","@id":"https:\/\/kb.elipse.com.br\/#\/schema\/person\/def69ea453ea60b250497b89225a9f87"},"headline":"Como utilizar arrastar-e-soltar (drag-and-drop) no E3.","datePublished":"2019-03-25T20:30:09+00:00","dateModified":"2019-04-26T19:09:16+00:00","mainEntityOfPage":{"@id":"https:\/\/kb.elipse.com.br\/en\/como-utilizar-arrastaresoltar-draganddrop-no-e3\/"},"wordCount":467,"commentCount":0,"publisher":{"@id":"https:\/\/kb.elipse.com.br\/#organization"},"articleSection":["Outros"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kb.elipse.com.br\/en\/como-utilizar-arrastaresoltar-draganddrop-no-e3\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kb.elipse.com.br\/en\/como-utilizar-arrastaresoltar-draganddrop-no-e3\/","url":"https:\/\/kb.elipse.com.br\/en\/como-utilizar-arrastaresoltar-draganddrop-no-e3\/","name":"[:pt]Como utilizar arrastar-e-soltar (drag-and-drop) no E3.[:] - Elipse Knowledgebase","isPartOf":{"@id":"https:\/\/kb.elipse.com.br\/#website"},"datePublished":"2019-03-25T20:30:09+00:00","dateModified":"2019-04-26T19:09:16+00:00","breadcrumb":{"@id":"https:\/\/kb.elipse.com.br\/en\/como-utilizar-arrastaresoltar-draganddrop-no-e3\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kb.elipse.com.br\/en\/como-utilizar-arrastaresoltar-draganddrop-no-e3\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kb.elipse.com.br\/en\/como-utilizar-arrastaresoltar-draganddrop-no-e3\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/kb.elipse.com.br\/en\/"},{"@type":"ListItem","position":2,"name":"Como utilizar arrastar-e-soltar (drag-and-drop) no E3."}]},{"@type":"WebSite","@id":"https:\/\/kb.elipse.com.br\/#website","url":"https:\/\/kb.elipse.com.br\/","name":"Elipse Knowledgebase","description":"","publisher":{"@id":"https:\/\/kb.elipse.com.br\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kb.elipse.com.br\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/kb.elipse.com.br\/#organization","name":"Elipse Software","url":"https:\/\/kb.elipse.com.br\/","sameAs":["http:\/\/www.facebook.com\/elipsesoftware"],"logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/kb.elipse.com.br\/#\/schema\/logo\/image\/","url":"https:\/\/kb.elipse.com.br\/wp-content\/uploads\/2019\/05\/schererelipse-com-br\/logoElipse.png","contentUrl":"https:\/\/kb.elipse.com.br\/wp-content\/uploads\/2019\/05\/schererelipse-com-br\/logoElipse.png","width":161,"height":58,"caption":"Elipse Software"},"image":{"@id":"https:\/\/kb.elipse.com.br\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/kb.elipse.com.br\/#\/schema\/person\/def69ea453ea60b250497b89225a9f87","name":"Elipse Software","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/kb.elipse.com.br\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ff1f7ec38f4687b06f6851d97b3cd2d0?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ff1f7ec38f4687b06f6851d97b3cd2d0?s=96&d=mm&r=g","caption":"Elipse Software"},"url":"https:\/\/kb.elipse.com.br\/en\/author\/webmasterelipse-com-br\/"}]}},"_links":{"self":[{"href":"https:\/\/kb.elipse.com.br\/en\/wp-json\/wp\/v2\/posts\/290"}],"collection":[{"href":"https:\/\/kb.elipse.com.br\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kb.elipse.com.br\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kb.elipse.com.br\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kb.elipse.com.br\/en\/wp-json\/wp\/v2\/comments?post=290"}],"version-history":[{"count":4,"href":"https:\/\/kb.elipse.com.br\/en\/wp-json\/wp\/v2\/posts\/290\/revisions"}],"predecessor-version":[{"id":5906,"href":"https:\/\/kb.elipse.com.br\/en\/wp-json\/wp\/v2\/posts\/290\/revisions\/5906"}],"wp:attachment":[{"href":"https:\/\/kb.elipse.com.br\/en\/wp-json\/wp\/v2\/media?parent=290"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kb.elipse.com.br\/en\/wp-json\/wp\/v2\/categories?post=290"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kb.elipse.com.br\/en\/wp-json\/wp\/v2\/tags?post=290"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}