We have discussed how to add an HTML element to another by Drag and Drop process. We have sent a simple text containing dragged element ID to the destination element. Now we want to send more advanced messages, HTML codes . . .
The main procedure is the same (refer to the previous post if you don’t know it). Let’s first make four HTML objects, three for dragging and the last is a place for dropping:
<div style=”width: 120px; border-style: solid; border-width: thick; height: 20px; text-align: center;”
ID=”txt1″ draggable=”true” ondragstart=”saveobj(event)”
><i>text</i></div>
<div style=”width: 120px; border-style: solid; border-width: thick; height: 20px; text-align: center;”
ID=”txt2″ draggable=”true” ondragstart=”saveobj(event)”
><b>text</b></div>
<div style=”width: 120px; border-style: solid; border-width: thick; height: 20px; text-align: center;”
ID=”txt3″ draggable=”true” ondragstart=”saveobj(event)”
><u>text</u></div>
<div style=”height: 113px; border-style: solid; border-width: 1px; padding: 1px 4px; width: 169px;”
ondragover=”allowdrag(event)” ondrop=”addobj(event)”
>Drop Here</div>
Their attributes are the same with previous post example. But the functions; first edit ‘saveobj’ function like below:
function saveobj(ev){
var code=document.getElementById(ev.target.id).innerHTML
code= code.replace(/</g,”<”)
code= code.replace(/>/g,”>”)
ev.dataTransfer.setData(“text/html”,code);
}
We have gotten the dragged element inner HTML codes, i. e. the texts written in it; then we have done two replacements to convert html codes of ‘<’ and ‘>’ to their real shapes. Finally we have sent the code to the dropping place with the type ‘text/html‘. The ‘saveobj’ must be changed to:
function addobj(ev){
var code=ev.dataTransfer.getData(“text/html”)
ev.target.innerHTML=ev.target.innerHTML +”<br>”+ code;
}
The sent code is received with its specified type, and added to the dropping place inner HTML codes after a new line. That’s it! You can do uncountable dropping of each object.
At the next post we want to manage more advanced drag and drop process . . .
Hello Web Admin, I noticed that your On-Page SEO is is missing a few factors, for one you do not use all three H tags in your post, also I notice that you are not using bold or italics properly in your SEO optimization. On-Page SEO means more now than ever since the new Google update: Panda. No longer are backlinks and simply pinging or sending out a RSS feed the key to getting Google PageRank or Alexa Rankings, You now NEED On-Page SEO. So what is good On-Page SEO?First your keyword must appear in the title.Then it must appear in the URL.You have to optimize your keyword and make sure that it has a nice keyword density of 3-5% in your article with relevant LSI (Latent Semantic Indexing). Then you should spread all H1,H2,H3 tags in your article.Your Keyword should appear in your first paragraph and in the last sentence of the page. You should have relevant usage of Bold and italics of your keyword.There should be one internal link to a page on your blog and you should have one image with an alt tag that has your keyword….wait there’s even more Now what if i told you there was a simple WordPress plugin that does all the On-Page SEO, and automatically for you? That’s right AUTOMATICALLY, just watch this 4minute video for more information at. Seo Plugin