ASP .NET Core MVC Documentation

Getting Started

jqxDragDrop represents a UI component which allows you to drag and drop elements.

Every ASP .NET Core Mvc Tag Helper from jQWidgets toolkit needs its JavaScript files to be included in order to work properly.

Include all required javascript and css files

jqxDragDrop requires the following files:

• CSS

• jqx.base.css

• Javascript

• jqxcore.js
• jqxdragdrop.js

The next step is to create html element within the body of the html document and add the initialization attributes.

<script src="~/jqwidgets/jqxdragdrop.js"></script>
<style type="text/css">
    .row {
        padding: 1px;
    }
    .draggable {
        border: 1px solid #bbb;
        background-color: #C9ECFF;
        width: 100px;
        height: 100px;
        left: 30px;
        top: 50px;
        padding: 5px;
        z-index: 2;
    }
    #draggable-parent {
        background-color: #eeffee;
        width: 350px;
        height: 350px;
        text-align: center;
        border: 1px solid #eee;
        float: left;
    }
    .main-container {
        width: 350px;
        height:350px;
        z-index: 0;
    }
    .events {
        float: right;
        padding: 10px;
        font-family: Tahoma;
        font-size: 13px;
    }
    .labels {
        position: relative;
        font-family: Verdana;
        font-size: 11px;
        color: #000;
    }
    .drop-target {
        background-color: #FBFFB5;
        width: 150px;
        height: 150px;
        border: 1px solid #ddd;
        margin-left: 190px;
        margin-top: 70px;
        z-index: 1;
    }
</style>
<div class="main-container">
    <div id="draggable-parent">
        <div id="draggable" class="draggable">
            <div class="labels">I can be dragged only inside my parent</div>
        </div>
        <jqx-drag-drop selector="draggable">
            
        </jqx-drag-drop>
        <div class="drop-target"><div class="label">I'm a drop target</div></div>
    </div>
</div>

To bind to an event of a UI Component, you can use on-event-type syntax. The example code below demonstrates how to bind to an event.

<script src="~/jqwidgets/jqxdragdrop.js"></script>
<style type="text/css">
    .row {
        padding: 1px;
    }
    .draggable {
        border: 1px solid #bbb;
        background-color: #C9ECFF;
        width: 100px;
        height: 100px;
        left: 30px;
        top: 50px;
        padding: 5px;
        z-index: 2;
    }
    #draggable-parent {
        background-color: #eeffee;
        width: 350px;
        height: 350px;
        text-align: center;
        border: 1px solid #eee;
        float: left;
    }
    .main-container {
        width: 350px;
        height:350px;
        z-index: 0;
    }
    .events {
        float: right;
        padding: 10px;
        font-family: Tahoma;
        font-size: 13px;
    }
    .labels {
        position: relative;
        font-family: Verdana;
        font-size: 11px;
        color: #000;
    }
    .drop-target {
        background-color: #FBFFB5;
        width: 150px;
        height: 150px;
        border: 1px solid #ddd;
        margin-left: 190px;
        margin-top: 70px;
        z-index: 1;
    }
</style>
<div class="main-container">
    <div id="draggable-parent">
        <div id="draggable" class="draggable">
            <div class="labels">I can be dragged only inside my parent</div>
        </div>
        <jqx-drag-drop selector="draggable">
            
        </jqx-drag-drop>
        <div class="drop-target"><div class="label">I'm a drop target</div></div>
    </div>
</div>
							
@section scripts {								
<script type="text/javascript">									
	function eventHandler(event) {									
	}									
</script>									
}