Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Mar 2011
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Limiting drop zone to one image

    Hi I am wondering how I would limit the drop zones to just one image per drop zone?


    Code:
    <ul id="images">
      <li><a id="1" draggable="true"><img src="images/1.jpg" value = "flower"></a></li>
      <li><a id="2" draggable="true"><img src="images/2.jpg" value = "boy"></a></li>
      <li><a id="3" draggable="true"><img src="images/3.jpg" value = "girl"></a></li>
    </ul>
    
    <form name = "objects" id="form" action = "form.php" method = "post">
    
    <div class="drop_zones">
      <div class="drop_zone" id="drop_zone1" droppable="true" type = "text" name =    "drop_zone1">
      </div>
    
      <div class="drop_zone" id="drop_zone2"  droppable="true" type = "text" name = "drop_zone2">
      </div>
    
      <div class="drop_zone" id="drop_zone3" droppable="true" type = "text" type = "file" name = "drop_zone3">
      </div>
    </div>


    Code:
    var addEvent = (function () {
    if (document.addEventListener) {
    return function (el, type, fn) {
      if (el && el.nodeName || el === window) {
        el.addEventListener(type, fn, false);
      } else if (el && el.length) {
        for (var i = 0; i < el.length; i++) {
          addEvent(el[i], type, fn);
        }
      }
     };
    } else {
    return function (el, type, fn) {
      if (el && el.nodeName || el === window) {
        el.attachEvent('on' + type, function () { return fn.call(el, window.event); });
      } else if (el && el.length) {
        for (var i = 0; i < el.length; i++) {
          addEvent(el[i], type, fn);
         }
       }
     };
     }
    })();
    
    
    var dragItems;
    updateDataTransfer();
    var dropAreas = document.querySelectorAll('[droppable=true]');
    
    
    function cancel(e) {
    if (e.preventDefault) {
    e.preventDefault();
    }
    return false;
    }
    
    
    function updateDataTransfer() {
    dragItems = document.querySelectorAll('[draggable=true]');
    for (var i = 0; i < dragItems.length; i++) {
        addEvent(dragItems[i], 'dragstart', function (event) {
            event.dataTransfer.setData('obj_id', this.id);
            return false;
        });
    }
    }
    
    
     addEvent(dropAreas, 'dragover', function (event) {
    if (event.preventDefault) event.preventDefault();
    
    
    this.style.borderColor = "#000";
    return false;
    });
    
    
    addEvent(dropAreas, 'dragleave', function (event) {
    if (event.preventDefault) event.preventDefault();
    
    
    this.style.borderColor = "#ccc";
    return false;
    });
    
    
     addEvent(dropAreas, 'dragenter', cancel);
    
    // drop event handler
    addEvent(dropAreas, 'drop', function (event) {
    if (event.preventDefault) event.preventDefault();
    
    // get dropped object
    var iObj = event.dataTransfer.getData('obj_id');
    var oldObj = document.getElementById(iObj);
    
    // get its image src
    var oldSrc = oldObj.childNodes[0].src;
    oldObj.className += 'hidden';
    
    var oldThis = this;
    
    setTimeout(function() {
        oldObj.parentNode.removeChild(oldObj); // remove object from DOM
    
        // add similar object in another place
        oldThis.innerHTML += '<a id="'+iObj+'" draggable="true"><img src="'+oldSrc+'" />    </a>';
    
        // and update event handlers
        updateDataTransfer();
    
        // little customization
        oldThis.style.borderColor = "#ccc";
    }, 500);
    
    return false;
    });
    Anyone know?

  • #2
    New Coder
    Join Date
    Mar 2011
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Anyone have any idea please?

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    .draggable {
      width:100px;
    }
    
    .drop_zone {
      width:200px;height:200px;border:solid red 1px;float:left
    }
    
    /*]]>*/
    </style>
    
    </head>
    
    <body>
    
    <ul id="images">
      <li><a ><img class="draggable" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" title = "flower"></a></li>
      <li><a><img class="draggable" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" title = "flower"></a></li>
      <li><a><img class="draggable" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" title = "flower"></a></li>
    </ul>
    
    
    <div class="drop_zones">
      <div class="drop_zone" id="drop_zone1">
      </div>
    
      <div class="drop_zone" id="drop_zone2">
      </div>
    
      <div class="drop_zone" id="drop_zone3">
      </div>
    </div>
    
    <script  type="text/javascript">
    /*<![CDATA[*/
    // Drag Dock (23-May-2012)
    // by Vic Phillips http://www.vicsjavascripts.org.uk/
    
    
    var zxcDragDock={
    
     init:function(o){
      var drag=this.bycls(o.DragClass,document),docks=this.bycls(o.DockClass,document),obj,z0=0
      obj={
       docks:docks
      }
      for (;z0<drag.length;z0++){
       this.addevt(drag[z0],'mousedown','down',obj,drag[z0]);
      }
      this.addevt(document,'mousemove','move',obj);
      this.addevt(document,'mouseup','up',obj);
     },
    
     down:function(e,o,img){
      var p=this.pos(img);
      o.drag=document.createElement('IMG');
      o.drag.src=img.src;
      o.drag.style.position='absolute';
      o.drag.style.zIndex='101';
      o.drag.style.left=p[0]+'px';
      o.drag.style.top=p[1]+'px';
      o.drag.style.width=img.width+'px';
      o.drag.style.height=img.height+'px';
      document.body.appendChild(o.drag);
      o.mse=[e.clientX,e.clientY];
      this.rtn(e);
     },
    
     move:function(e,o){
      if (o.drag){
       var mse=[e.clientX,e.clientY];
       o.drag.style.left=parseInt(o.drag.style.left)+mse[0]-o.mse[0]+'px';
       o.drag.style.top=parseInt(o.drag.style.top)+mse[1]-o.mse[1]+'px';
       o.mse=mse;
       this.rtn(e);
      }
     },
    
     up:function(e,o){
      if (o.drag){
       var lft=parseInt(o.drag.style.left),top=parseInt(o.drag.style.top),p,z0=0;
       for (;z0<o.docks.length;z0++){
        p=this.pos(o.docks[z0]);
        if (!o.docks[z0].getElementsByTagName('IMG')[0]&&lft>p[0]&&lft+o.drag.width<p[0]+o.docks[z0].offsetWidth&&top>p[1]&&top+o.drag.height<p[1]+o.docks[z0].offsetHeight){
         o.drag.style.position='static';
         o.docks[z0].appendChild(o.drag);
         o.drag=false;
         return;
        }
       }
       document.body.removeChild(o.drag);
       o.drag=false;
       this.rtn(e);
      }
     },
    
     rtn:function(e){
      if(e.stopPropagation){
       e.stopPropagation();
      }
      if (!window.event){
       e.preventDefault();
      }
      e.cancelBubble=true;
      e.cancel=true;
      e.returnValue=false;
      return false;
     },
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p,p1);}, false);
      else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p,p1); });
     },
    
     bycls:function (nme,el){
      for (var reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName('*'),ary=[],z0=0; z0<els.length;z0++){
       if(reg.test(els[z0].className)){
        ary.push(els[z0]);
       }
      }
      return ary;
     }
    
    }
    
    zxcDragDock.init({
     DragClass:'draggable',
     DockClass:'drop_zone'
    });
    
    /*]]>*/
    </script>
    
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

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