www.webdeveloper.com
Results 1 to 2 of 2

Thread: Removing attributes from an element when dropped -Drag and Drop opperation

  1. #1
    Join Date
    Aug 2011
    Posts
    60

    Removing attributes from an element when dropped -Drag and Drop opperation

    Code:
    var holder = document.getElementById('cms');
    
    holder.ondragstart =function(e)
    {
    dragID =e.srcElement.id;
    dregCl =e.srcElement.getAttribute('class');
    if(dragID ==='cms_tools'){ cmsPanel =document.getElementById('cms_tools'); }
    }
    
    holder.ondragover = function(e)
    {
    if(dragID ==='cms_tools')
    {
    cmsPanel.style.top = (e.clientY-7) +'px';
    cmsPanel.style.left = (e.clientX-250) +'px'; }}
    
    holder.ondragend = function(e)
    {
    delete window.dragID; 
    if(dregCl ==='imglib'){
    e.target.removeAttribute('width'); 
    e.target.removeAttribute('height');
    e.target.removeAttribute('class'); } }
    
    
    holder.ondrop = function (e) 
    { 
    
    }
    It seems like it should be simple. I have images in a panel that are sized down with width= and height= and need them removed when the image is dropped. The code you see now does this but applies it to the source image instead of the destination image. I cannot seem to find what should be a one word solution to address the image being dropped rather then the source image. Please keep answers constrained to standard javascript, no proprietary libraries or convoluted suggestions. Thank you in advance.

  2. #2
    Join Date
    Aug 2011
    Posts
    60
    Code:
    holder.ondragstart =function(e)
    {
    Img_Src_Drop =e.target.getAttribute('src');
    dragID =e.srcElement.id;
    dregCl =e.srcElement.getAttribute('class');
    if(dragID ==='cms_tools'){ cmsPanel =document.getElementById('cms_tools'); }}
    holder.ondragover = function(e)
    {
    if(dragID ==='cms_tools')
    {
    cmsPanel.style.top = (e.clientY-7) +'px';
    cmsPanel.style.left = (e.clientX-250) +'px'; }}
    holder.ondragend = function(e)
    {
    delete window.dragID; 
    if(dregCl ==='imglib'){ 
    e.preventDefault; 
    document.execCommand('InsertImage',null,Img_Src_Drop); }}
    holder.ondrop = function (e) 
    { e.preventDefault; }
    It was little more than one word but the fix was to simply preventDefault and insert a new image. Not what I was looking for but it works as desired. Hope this post helps anyone else in a similar bind.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles