JavaLeave JavaLeave - 1 year ago 58
Javascript Question

Draggable list into html5 table has bug

There are two lists of items need to be mapped into a table. I've create the table and draggable list item followed by reference-style link to Accessing table cell data within list items with Javascript.

The current situation



I have two lists, and need to be filled into two columns(with different ids); ideally, the the credit card list item can only be put into credit card column, vice versa for api list and api field.

The current issue




  1. When I dragged items from api list to api field, it displayed double text.

  2. Two list items can drag into different fields. How can I make the list items limited into matched table column?



Here is the JsFiddle along with some sample code:

$("#ccField li").draggable({
appendTo: "body",
helper: "clone",
cursor: "move",
revert: "invalid"
});

$("#apiField li").draggable({
appendTo: "body",
helper: "clone",
cursor: "move",
revert: "invalid"
});

ccDroppable($("#creditCardApiTable table td"));

apiDroppable($("#creditCardApiTable table td"));

function ccDroppable($elements) {
$elements.droppable({
activeClass: "ui-state-default",
hoverClass: "ui-drop-hover",
accept: ":not(.ui-sortable-helper)",

over: function (event, ui) {
var $this = $(this);
},
drop: function (event, ui) {
var $this = $(this);
$("<span></span>").text(ui.draggable.text()).appendTo(this);
$("#ccList").find(":contains('" + ui.draggable.text() + "')")[0].remove();
}
});
}

function apiDroppable($elements) {
$elements.droppable({
activeClass: "ui-state-default",
hoverClass: "ui-drop-hover",
accept: ":not(.ui-sortable-helper)",

over: function (event, ui) {
var $this = $(this);
},
drop: function (event, ui) {
var $this = $(this);
$("<span></span>").text(ui.draggable.text()).appendTo(this);
$("#apiList").find(":contains('" + ui.draggable.text() + "')")[0].remove();
}
});
}

Answer Source

Is this what you are looking for? http://jsfiddle.net/ryaL3xpk/3/

$("#ccField li").draggable({
    appendTo: "body",
    helper: "clone",
    cursor: "move",
    revert: "invalid"
});

$("#apiField li").draggable({
    appendTo: "body",
    helper: "clone",
    cursor: "move",
    revert: "invalid"
});

function droppableField($element, $accept) {
    $element.droppable({
        activeClass: "ui-state-default",
        hoverClass: "ui-drop-hover",
        accept: $accept,
        over: function (event, ui) {
            var $this = $(this);
        },
        greedy:true,
        tolerance:'touch',
        drop: function (event, ui) {
            var $this = $(this);
            $this.text(ui.draggable.text()).appendTo(this);
        }
    });
}

droppableField($('#creditCardApiTable table td .ccDropField'), '#ccField li');
droppableField($('#creditCardApiTable table td .apiDropField'), '#apiList li');

So basically, you allow each span to be droppable, and each accepts different draggable field.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download