Skip to content

Commit

Permalink
Merge pull request surveyjs#3391 from surveyjs/bug/creator-v2-1883
Browse files Browse the repository at this point in the history 
Bug/creator v2 1883
  • Loading branch information
@andrewtelnov
andrewtelnov authored Sep 28, 2021
2 parents 8fde3fc + e5f5e84 commit 3d88c8c
Show file tree
Hide file tree
Showing 2 changed files with 27 additions and 22 deletions.
18 changes: 11 additions & 7 deletions src/dragdrop/choices.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,9 +38,12 @@ export class DragDropChoices extends DragDropCore<QuestionSelectBase> {
.closest("[data-sv-drop-target-item-value]")
.cloneNode(isDeepClone)
);
const controlsNode:HTMLElement = clone.querySelector(".svc-item-value-controls");
const controlsNode: HTMLElement = clone.querySelector(".svc-item-value-controls");
controlsNode.style.display = "block";

clone.classList.remove("svc-item-value--moveup");
clone.classList.remove("svc-item-value--movedown");

draggedElementShortcut.appendChild(clone);

return draggedElementShortcut;
Expand Down Expand Up @@ -72,7 +75,7 @@ export class DragDropChoices extends DragDropCore<QuestionSelectBase> {
isBottom: boolean,
dropTargetNode?: HTMLElement
): boolean {
const choices = this.parentElement.choices;
const choices = this.parentElement.visibleChoices;

if (this.parentElement.getType() !== "imagepicker") {
const dropTargetIndex = choices.indexOf(this.dropTarget);
Expand All @@ -89,26 +92,26 @@ export class DragDropChoices extends DragDropCore<QuestionSelectBase> {
}
}

if (this.dropTarget === this.draggedElement) return false;

// shouldn't allow to drop on "adorners" (selectall, none, other)
if (choices.indexOf(dropTarget) === -1) return false;

return true;
}

protected calculateIsBottom(clientY: number): boolean {
const choices = this.parentElement.choices;
const choices = this.parentElement.visibleChoices;
return (
choices.indexOf(this.dropTarget) - choices.indexOf(this.draggedElement) >
0
);
}

protected afterDragOver(dropTargetNode: HTMLElement): void {
if (this.isDropTargetDoesntChanged(this.isBottom)) return;
if (this.dropTarget === this.draggedElement) return;
if (this.parentElement.getType() === "imagepicker") return;

const choices = this.parentElement.choices;
const choices = this.parentElement.visibleChoices;
const dropTargetIndex = choices.indexOf(this.dropTarget);
const draggedElementIndex = choices.indexOf(this.draggedElement);

Expand All @@ -134,9 +137,10 @@ export class DragDropChoices extends DragDropCore<QuestionSelectBase> {

protected doDrop(): any {
const isTop = !this.isBottom;
const visibleChoices = this.parentElement.visibleChoices;
const choices = this.parentElement.choices;
const oldIndex = choices.indexOf(this.draggedElement);
let newIndex = choices.indexOf(this.dropTarget);
let newIndex = visibleChoices.indexOf(this.dropTarget);

if (oldIndex < newIndex && isTop) {
newIndex--;
Expand Down
31 changes: 16 additions & 15 deletions tests/dragdrophelpertests.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,17 @@ import { Question } from "../src/question";

export default QUnit.module("DragDropHelper Tests");

QUnit.test("drop", function(assert) {
QUnit.test("drop", function (assert) {
let ddHelper = new DragDropChoices(null);
const drop = ddHelper["drop"];

debugger;
const item1 = { value: "item1" };
const item2 = { value: "item2" };
const item3 = { value: "item3" };
const item4 = { value: "item4" };

let question = { choices: [item1, item2, item3, item4] };
let question = { choices: [item1, item2, item3, item4], visibleChoices: [item1, item2, item3, item4] };
ddHelper["isBottom"] = true;
ddHelper["parentElement"] = <any>question;
ddHelper["draggedElement"] = <any>item1;
Expand All @@ -32,7 +33,7 @@ QUnit.test("drop", function(assert) {
["item2", "item3", "item1", "item4"]
);

question = { choices: [item1, item2, item3, item4] };
question = { choices: [item1, item2, item3, item4], visibleChoices: [item1, item2, item3, item4] };
ddHelper["isBottom"] = false;
ddHelper["parentElement"] = <any>question;
ddHelper["draggedElement"] = <any>item1;
Expand All @@ -47,7 +48,7 @@ QUnit.test("drop", function(assert) {
["item2", "item1", "item3", "item4"]
);

question = { choices: [item1, item2, item3, item4] };
question = { choices: [item1, item2, item3, item4], visibleChoices: [item1, item2, item3, item4] };
ddHelper["isBottom"] = true;
ddHelper["parentElement"] = <any>question;
ddHelper["draggedElement"] = <any>item4;
Expand All @@ -62,7 +63,7 @@ QUnit.test("drop", function(assert) {
["item1", "item2", "item3", "item4"]
);

question = { choices: [item1, item2, item3, item4] };
question = { choices: [item1, item2, item3, item4], visibleChoices: [item1, item2, item3, item4] };
ddHelper["isBottom"] = false;
ddHelper["parentElement"] = <any>question;
ddHelper["draggedElement"] = <any>item4;
Expand All @@ -77,7 +78,7 @@ QUnit.test("drop", function(assert) {
["item1", "item2", "item4", "item3"]
);

question = { choices: [item1, item2, item3, item4] };
question = { choices: [item1, item2, item3, item4], visibleChoices: [item1, item2, item3, item4] };
ddHelper["isBottom"] = true;
ddHelper["parentElement"] = <any>question;
ddHelper["draggedElement"] = <any>item1;
Expand All @@ -91,7 +92,7 @@ QUnit.test("drop", function(assert) {
question.choices.map((c) => c.value),
["item2", "item1", "item3", "item4"]
);
question = { choices: [item1, item2, item3, item4] };
question = { choices: [item1, item2, item3, item4], visibleChoices: [item1, item2, item3, item4] };
ddHelper["isBottom"] = false;
ddHelper["parentElement"] = <any>question;
ddHelper["draggedElement"] = <any>item1;
Expand All @@ -107,7 +108,7 @@ QUnit.test("drop", function(assert) {
);
});

QUnit.test("calculateMiddleOfHTMLElement", function(assert) {
QUnit.test("calculateMiddleOfHTMLElement", function (assert) {
let ddHelper = new DragDropSurveyElements(null);
const calculateMiddleOfHTMLElement = ddHelper["calculateMiddleOfHTMLElement"];
const testElement = document.body.appendChild(document.createElement("div"));
Expand All @@ -120,7 +121,7 @@ QUnit.test("calculateMiddleOfHTMLElement", function(assert) {
assert.deepEqual(result, 60);
});

QUnit.test("calculateIsBottom", function(assert) {
QUnit.test("calculateIsBottom", function (assert) {
let ddHelper = new DragDropSurveyElements(null);
const testElement = document.body.appendChild(document.createElement("div"));
(<any>testElement).getBoundingClientRect = () => ({
Expand All @@ -135,7 +136,7 @@ QUnit.test("calculateIsBottom", function(assert) {
assert.equal(result, false);
});

QUnit.test("calculateIsEdge", function(assert) {
QUnit.test("calculateIsEdge", function (assert) {
DragDropSurveyElements.edgeHeight = 20;
let ddHelper = new DragDropSurveyElements(null);
const testElement = document.body.appendChild(document.createElement("div"));
Expand All @@ -158,7 +159,7 @@ QUnit.test("calculateIsEdge", function(assert) {
assert.equal(result, true);
});

QUnit.test("dropTargetDataAttributeName for choices", function(assert) {
QUnit.test("dropTargetDataAttributeName for choices", function (assert) {
let ddHelper: any = new DragDropChoices(null);

ddHelper.draggedElement = new ItemValue(null);
Expand All @@ -168,7 +169,7 @@ QUnit.test("dropTargetDataAttributeName for choices", function(assert) {
);
});

QUnit.test("dropTargetDataAttributeName for questions", function(assert) {
QUnit.test("dropTargetDataAttributeName for questions", function (assert) {
let ddHelper: any = new DragDropSurveyElements(null);

ddHelper.draggedElement = new Question(null);
Expand All @@ -178,7 +179,7 @@ QUnit.test("dropTargetDataAttributeName for questions", function(assert) {
);
});

QUnit.test("choices: onBeforeDrop and onAfterDrop events", function(assert) {
QUnit.test("choices: onBeforeDrop and onAfterDrop events", function (assert) {
const survey = new SurveyModel({
elements: [
{
Expand Down Expand Up @@ -216,7 +217,7 @@ QUnit.test("choices: onBeforeDrop and onAfterDrop events", function(assert) {
assert.equal(draggedElementParent.name, "q");
});

QUnit.test("surveyelement: onBeforeDrop and onAfterDrop events", function(
QUnit.test("surveyelement: onBeforeDrop and onAfterDrop events", function (
assert
) {
const survey = new SurveyModel({
Expand Down Expand Up @@ -266,7 +267,7 @@ QUnit.test("surveyelement: onBeforeDrop and onAfterDrop events", function(
assert.equal(afterCount, 1);
});

QUnit.test("allowDropHere", function(assert) {
QUnit.test("allowDropHere", function (assert) {
const survey = new SurveyModel({
elements: [
{
Expand Down

0 comments on commit 3d88c8c

Please sign in to comment.