There is a draggable element in my code, which is represented by a div
<div class="question-constructor multiple-choice-problem">
<label for="textbox" class="question-label"> #. Edit this to define question: </label>
<input type="radio" name="test" id="option-1-1" class="question-radio" style="float:left;">
<input type="radio" name="test" id="option-1-2" class="question-radio" style="float:left;">
<input type="radio" name="test" id="option-1-3" class="question-radio" style="float:left;">
<input type="radio" name="test" id="option-1-4" class="question-radio" style="float:left;">
</div>
These draggable divs are then dropped into the sortable area using the following destination div:
<div id="preview" ></div>Below is the JavaScript used for sorting:
var sortableIn = 0;
$('#preview').sortable({
receive: function(event, ui) {
sortableIn = 1;
$(ui.item).addClass('editable');
},
placeholder: 'ph',
over: function(event, ui) { sortableIn = 1; },
out: function(event, ui) { sortableIn = 0; },
start: function( event, ui ) {
$(ui.helper).addClass('on-sort');
},
beforeStop: function (event, ui) {
if (sortableIn == 0) {
ui.item.remove();
}
},
stop: function( event, ui ) {
$(this).find('.on-sort').removeClass("on-sort");
}
});
My aim is to create an onclick event specifically for the sortable items. I attempted to achieve this with the following code:
$(function() {
$(document).on('click', '#preview ', function() {
console.log('clickable');
});
});
However, clicking on the sortable items triggers the event for everything instead of just the item clicked. What I want to do is change the text of the label within the specific sortable div that was clicked.
For instance:
- I dragged the
.question-constructordivthree times into the#previewdiv (resulting in three items). - When I click on the 2nd item in the sortable list, I wish to modify the text label on that particular item only.
How can I achieve this?
If there is any confusion regarding my question, feel free to leave a comment and I will provide further clarification.