CODEWITHSUNDEEP
jqueryhtmldrag-and-droponclick
paul
paul

Reputation: 125

Draggable clone issue

I want to drag an image box to a Droppable (the table) and after that change the image source as in this example http://fiddle.jshell.net/c6vL61fb/7/ but there is a problem.

If I set ui clone as true $(ui.draggable).clone(true) then after the image is dragged, I can click on the link (ui-icon-folder-open). However, when I move the dropped image around then the original image is dragged instead of the copied image.

If I don't set the ui clone $(ui.draggable).clone() then after dragged, the link is un-clickable though the copied image can be moved around.

I also tried with ui.helper.clone. That didn't solve the problem.

How can I fix that problem? Thank you very much in advance.

HTML

<div id="products">
        <p>Toolbox</p>
        <div id="photo" class="product ui-widget-content">
            <img src="http://s29.postimg.org/b347myz5f/Pictures_icon.png" width="96" height="96"></img>
            <a href="#" title="Change Image" class="ui-icon ui-icon-folder-open">Change Image</a>
        </div>
    </div>
    <br>
    <br>
    <div id="cont">
        <p>Drop Here</p>
        <table id="container" width="100%" border="1">
            <tr height="100px">
                <td id='cell1' class='cell ui-widget-content' width="50%">&nbsp;</td>
                <td id='cell2' class='cell ui-widget-content' width="50%">&nbsp;</td>
            </tr>
            <tr height="100px">
                <td id='cell3' class='cell ui-widget-content' width="50%">&nbsp;</td>
                <td id='cell4' class='cell ui-widget-content' width="50%">&nbsp;</td>
            </tr>
        </table>
    </div>

Javascript 

$(function () {
    var cnt = 0;
    $(".cell")
    .droppable({
        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        drop: function(event, ui) {
            cnt++;
            var self = $(this);
            var productid = ui.draggable.attr("id");
            if (self.find("[id=" + productid + "]").length) return;                    


            $(this).append($(ui.draggable).clone(true)
                           .attr('id',ui.draggable.attr('id')+cnt)
                           .removeAttr('style'));                   

            var cartid = self.closest('.cell').attr('id');
            $(".cell:not(#"+cartid+") [id="+productid+"]").remove();
        }
    })
    .sortable();

    $(".product").draggable({
        appendTo: 'body',
        helper: 'clone'
    });

    // resolve the icons behavior with event delegation
    var $img_target = "";           
    $(".product").click(function(event){    
        var $item = $(this),
            $target = $(event.target);

        if ($target.is("a.ui-icon-folder-open")){ 
            alert('hi');
        }
        return false;
    });         
});

CSS

#products{
    display: inline-block;
}
.product {
    float: left;
    padding: 0.4em; 
    margin: 0 0.4em 0.4em 0;
}
#products .product a {
    display: none;
}
.product img {
    cursor: move;
}

Upvotes: 1

Views: 292

Answers (1)

elas
elas

Reputation: 815

Try to clone without passing 'true', and add the event to the document:

$(document).on('click', '.product', function(event){ ... }

Fiddle: http://fiddle.jshell.net/ucf83mp2/

Upvotes: 1

Related Questions