Is it possible to Drag from Grid to Div

[DavidSimmonsParticipant]

Is it possible to Drag a cell (contents of cell) from a grid and drop it into a simple div. All of the examples so far are dealing grid to grid and I am doing that in one of my apps and is working well. My Grid to Grid code is below. But a new requirement is to drop the contents of cell into a plane div and I have not gotten this work.

rendered: function (type) {
var gridCells = $(jqxgrid).find(‘.jqx-grid-cell’);
gridCells.jqxDragDrop({
appendTo: ‘body’, theme: theme, dragZIndex: 99999,
dropAction: ‘none’,
initFeedback: function (feedback) {
feedback.width(100);
feedback.height(25);
},
dropTarget: $(‘#jqxgridScheduleAssignment’), revert: true
});

gridCells.off(‘dragEnd’);
gridCells.off(‘dropTargetEnter’);
gridCells.off(‘dropTargetLeave’);

gridCells.on(‘dropTargetEnter’, function () {
gridCells.jqxDragDrop({ revert: false });
});

gridCells.on(‘dropTargetLeave’, function () {
gridCells.jqxDragDrop({ revert: true });
});

gridCells.on(‘dragStart’, function (event) {
var dragStartCell = $(jqxgrid).jqxGrid(‘getcellatposition’, event.args.pageX, event.args.pageY);
if (dragStartCell != null) {
var value = $(this).text();
$(this).jqxDragDrop(‘data’, {
value: value
});
}
});

gridCells.on(‘dragEnd’, function (event) {
//var value = $(this).jqxDragDrop(‘data’);
var dragEndValue = $(this).text();
var dragEndCell = $(“#jqxgridScheduleAssignment”).jqxGrid(‘getcellatposition’, event.args.pageX, event.args.pageY);
if (dragEndCell != null) {
$(“#jqxgridScheduleAssignment”).jqxGrid(‘setcellvalue’, dragEndCell.row, dragEndCell.column, dragEndValue);
}
});
},

[DimitarParticipant]

Hello DavidSimmons,

Please check out the demo Drag to a Form, where you can drag a row’s contents to a form. Your approach should be similar, but in the dragEnd event handler, instead of setting the values of the form inputs, you should set your div’s HTML, i.e.:

gridCells.on('dragEnd', function (event) {
    var value = $(this).jqxDragDrop('data');
    var position = $.jqx.position(event.args);
    var pageX = position.left;
    var pageY = position.top;
    var $div = $("#myDiv");
    var targetX = $div.offset().left;
    var targetY = $div.offset().top;
    var width = $div.width();
    var height = $div.height();
    // fill the div if the user dropped the dragged item over it.
    if (pageX >= targetX && pageX <= targetX + width) {
        if (pageY >= targetY && pageY <= targetY + height) {
            $div.html("First name: " + value.firstname + ", Last name: " + value.lastname + ", Product: " + value.productname);
        }
    }
});

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts