SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2002
    Location
    India
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Drag and Drop to make a carpet online

    Hi!

    A customer who sells carpets wants to get a website where the site visitor should be able to create one's own patterns by dragging and dropping design elements (bordes, corners, central area, etc.) into place.

    Could you please share some javascript/dhtml resource to accomplish this?

    Thanks very much.

    OTH

  2. #2
    SitePoint Wizard
    Join Date
    Mar 2002
    Location
    Bristol, UK
    Posts
    2,240
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think the best thing to use for this would be Flash. Try posting in the Flash forum and you'll get a better response there [img]images/smilies/smile.gif[/img]

    Edit:

    Just realised you've already posted there. D'oh!


    -Sam
    Sam Hastings

  3. #3
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you're still interested in a dhtml solution I have some drag demos in the 'examples' section of my site.

  4. #4
    Under Construction Poop_Shoot's Avatar
    Join Date
    Jul 2003
    Location
    Sacramento, CA
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Heres a drag and drop script!

    Code:
    <script type="text/javascript">
    <!--
    var ns=document.getElementById&&!document.all
    var moving = false;
    var tempX = 0;
    var tempY = 0;
    var dex=""
    
    function dragnow(id) {
    elm_id = document.getElementById(id)
    if(dex!=""){
    dex.style.zIndex = ""
    }
    moving=true
    
    posX = tempX - elm_id.offsetLeft;
    posY = tempY - elm_id.offsetTop;
    elm_id.style.zIndex = 1
    dex=elm_id
    }
    
    function moveto(e) {
    tempX = (!ns) ? event.clientX : e.pageX;
    tempY = (!ns) ? event.clientY : e.pageY;
    if(moving != false) {
    elm_id.style.left = (tempX - posX) + "px";
    elm_id.style.top = (tempY - posY) + "px";
    }
    }
    
    document.onmousemove = moveto;
    document.onmouseup=new Function("moving=false");
    
    //-->
    </script> 
    
    <div id="dis1" onmousedown="dragnow(this.id)" style=" position:absolute;top:100px;left:50px;height:100px
    ;width:100px; background:#00FF00"> </div> 
    
    <div id="dis2" onmousedown="dragnow(this.id)" style=" position:absolute;top:100px;left:200px;height:100p
    x;width:100px; background:#FFFF00"> </div> 
    
    <div id="dis3" onmousedown="dragnow(this.id)" style=" position:absolute;top:100px;left:350px;height:100p
    x;width:100px; background:#FF0000"></div> 
    
    <div id="dis4" onmousedown="dragnow(this.id)" style=" position:absolute;top:100px;left:500px;height:100p
    x;width:100px; background:#0000FF"></div>


Bookmarks

Posting Permissions

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