Mixing
D3 drag and mouseup events
I am using d3 to select rectangle. I am trying to get both a drag end and mouseup event to fire on the rectangle. It looks like the drag events block mouseup events. (They do not block mouse over events) I have bound a mouse up and a drag event to the rectangle. When I click on the rectangle, the mouseup event doesn't fire, only the drag end fires. I have tried different combinations of event.stopPropagation() and preventDefault() to control which events fire. I also tried setting the drag event to null. None of these work. How do I get both the drag end and mouseup to fire on mouseup?
var target = d3.select('#test');
target.on('mouseup', (d) => alert('mouseup'))
.call(d3.drag()
.on("start", function () {
console.log('start')
})
.on("drag", function () {
console.log('drag');
}).on("end", function () {
alert('end');
//d3.select(window).on('click.drag', null);
})
);
<div id='test' />
#test { background:red; position:absolute; height:40px; width:40px; }
This functionality worked in D3 v3 but it does not work in v4
Edit:
To clarify, my problem was that the mouseup events are disabled on the page (and for that matter all elements) when the drag events trigger. I wanted to identify the target element when you drag from one shape onto another (hence the need for mouseup).
d3.js
asked Nov 20 '18 at 15:14
afriedman111afriedman111
7212
add a comment |
I am using d3 to select rectangle. I am trying to get both a drag end and mouseup event to fire on the rectangle. It looks like the drag events block mouseup events. (They do not block mouse over events) I have bound a mouse up and a drag event to the rectangle. When I click on the rectangle, the mouseup event doesn't fire, only the drag end fires. I have tried different combinations of event.stopPropagation() and preventDefault() to control which events fire. I also tried setting the drag event to null. None of these work. How do I get both the drag end and mouseup to fire on mouseup?
var target = d3.select('#test');
target.on('mouseup', (d) => alert('mouseup'))
.call(d3.drag()
.on("start", function () {
console.log('start')
})
.on("drag", function () {
console.log('drag');
}).on("end", function () {
alert('end');
//d3.select(window).on('click.drag', null);
})
);
<div id='test' />
#test { background:red; position:absolute; height:40px; width:40px; }
This functionality worked in D3 v3 but it does not work in v4
Edit:
To clarify, my problem was that the mouseup events are disabled on the page (and for that matter all elements) when the drag events trigger. I wanted to identify the target element when you drag from one shape onto another (hence the need for mouseup).
d3.js
asked Nov 20 '18 at 15:14
afriedman111afriedman111
7212
add a comment |
I am using d3 to select rectangle. I am trying to get both a drag end and mouseup event to fire on the rectangle. It looks like the drag events block mouseup events. (They do not block mouse over events) I have bound a mouse up and a drag event to the rectangle. When I click on the rectangle, the mouseup event doesn't fire, only the drag end fires. I have tried different combinations of event.stopPropagation() and preventDefault() to control which events fire. I also tried setting the drag event to null. None of these work. How do I get both the drag end and mouseup to fire on mouseup?
var target = d3.select('#test');
target.on('mouseup', (d) => alert('mouseup'))
.call(d3.drag()
.on("start", function () {
console.log('start')
})
.on("drag", function () {
console.log('drag');
}).on("end", function () {
alert('end');
//d3.select(window).on('click.drag', null);
})
);
<div id='test' />
#test { background:red; position:absolute; height:40px; width:40px; }
This functionality worked in D3 v3 but it does not work in v4
Edit:
To clarify, my problem was that the mouseup events are disabled on the page (and for that matter all elements) when the drag events trigger. I wanted to identify the target element when you drag from one shape onto another (hence the need for mouseup).
d3.js
asked Nov 20 '18 at 15:14
afriedman111afriedman111
7212
I am using d3 to select rectangle. I am trying to get both a drag end and mouseup event to fire on the rectangle. It looks like the drag events block mouseup events. (They do not block mouse over events) I have bound a mouse up and a drag event to the rectangle. When I click on the rectangle, the mouseup event doesn't fire, only the drag end fires. I have tried different combinations of event.stopPropagation() and preventDefault() to control which events fire. I also tried setting the drag event to null. None of these work. How do I get both the drag end and mouseup to fire on mouseup?
var target = d3.select('#test');
target.on('mouseup', (d) => alert('mouseup'))
.call(d3.drag()
.on("start", function () {
console.log('start')
})
.on("drag", function () {
console.log('drag');
}).on("end", function () {
alert('end');
//d3.select(window).on('click.drag', null);
})
);
<div id='test' />
#test { background:red; position:absolute; height:40px; width:40px; }
This functionality worked in D3 v3 but it does not work in v4
Edit:
To clarify, my problem was that the mouseup events are disabled on the page (and for that matter all elements) when the drag events trigger. I wanted to identify the target element when you drag from one shape onto another (hence the need for mouseup).
d3.js
d3.js
asked Nov 20 '18 at 15:14
afriedman111afriedman111
7212
asked Nov 20 '18 at 15:14
afriedman111afriedman111
7212
edited Nov 20 '18 at 19:05
afriedman111
asked Nov 20 '18 at 15:14
afriedman111afriedman111
7212
asked Nov 20 '18 at 15:14
afriedman111afriedman111
7212
asked Nov 20 '18 at 15:14
afriedman111afriedman111
7212
7212
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
In my experience you should just be able to add mouse down logic into the drag started event. Have you tried that in this case? If it's a more complicated use of mouse down and doesn't work with the drag started event, please add the specifics.
answered Nov 20 '18 at 16:33
A ZibudaA Zibuda
388
My problem was that the mouseup events are disabled on the page (and for that matter all elements) when the drag events trigger. I wanted to identify the target element when you drag from one shape onto another (hence the need for mouseup). To get around this I used the mouseover and mouseout to identify the element that the mouse is over and access that element in the drag end.
– afriedman111
Nov 20 '18 at 19:02
add a comment |
When you click on one element and drag to another, I wanted to detect what that second element is. Mouseup doesn't trigger when you drag an object, but mouseover and mouseout do. I used those functions to set a mouseover_obj variable. That way after you drag, when the drag end event executes, you can access that object. If it's not null, then its value that is the shape your mouse is over.
Here's some code:
JsFiddle for D3 Mouseup while Drag
var mouseover_node = null;
var svg = d3.select('body').append('svg').attr('width', 1000).attr('height', 1000);
var rect = svg.selectAll('rect')
.data([0, 2, 3])
.enter().append('rect')
.attr('x', function(x) { return +x * 0; })
.attr('y', function(y) { return +y * 120; })
.attr('width', function() { return 100; })
.attr('height', function() { return 100; })
.attr('fill', function(x) { if(x == 0){return'red';}else return 'blue'; });
rect.on("mouseover", (d) => {this.mouseover_node = d})
.on("mouseout", (d) => {this.mouseover_node = null})
.call(d3.drag()
.on("start", function () {
console.log('start');
return false;
})
.on("drag", function () {
console.log('drag');
})
.on("end", (sourceElement,index,svgItems) => {
console.log('end drag with mouseover: ' + this.mouseover_node);
})
);
answered Nov 20 '18 at 19:18
afriedman111afriedman111
7212
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53396051%2fd3-drag-and-mouseup-events%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
In my experience you should just be able to add mouse down logic into the drag started event. Have you tried that in this case? If it's a more complicated use of mouse down and doesn't work with the drag started event, please add the specifics.
answered Nov 20 '18 at 16:33
A ZibudaA Zibuda
388
My problem was that the mouseup events are disabled on the page (and for that matter all elements) when the drag events trigger. I wanted to identify the target element when you drag from one shape onto another (hence the need for mouseup). To get around this I used the mouseover and mouseout to identify the element that the mouse is over and access that element in the drag end.
– afriedman111
Nov 20 '18 at 19:02
add a comment |
In my experience you should just be able to add mouse down logic into the drag started event. Have you tried that in this case? If it's a more complicated use of mouse down and doesn't work with the drag started event, please add the specifics.
answered Nov 20 '18 at 16:33
A ZibudaA Zibuda
388
My problem was that the mouseup events are disabled on the page (and for that matter all elements) when the drag events trigger. I wanted to identify the target element when you drag from one shape onto another (hence the need for mouseup). To get around this I used the mouseover and mouseout to identify the element that the mouse is over and access that element in the drag end.
– afriedman111
Nov 20 '18 at 19:02
add a comment |
In my experience you should just be able to add mouse down logic into the drag started event. Have you tried that in this case? If it's a more complicated use of mouse down and doesn't work with the drag started event, please add the specifics.
answered Nov 20 '18 at 16:33
A ZibudaA Zibuda
388
In my experience you should just be able to add mouse down logic into the drag started event. Have you tried that in this case? If it's a more complicated use of mouse down and doesn't work with the drag started event, please add the specifics.
answered Nov 20 '18 at 16:33
A ZibudaA Zibuda
388
answered Nov 20 '18 at 16:33
A ZibudaA Zibuda
388
answered Nov 20 '18 at 16:33
A ZibudaA Zibuda
388
answered Nov 20 '18 at 16:33
A ZibudaA Zibuda
388
388
My problem was that the mouseup events are disabled on the page (and for that matter all elements) when the drag events trigger. I wanted to identify the target element when you drag from one shape onto another (hence the need for mouseup). To get around this I used the mouseover and mouseout to identify the element that the mouse is over and access that element in the drag end.
– afriedman111
Nov 20 '18 at 19:02
add a comment |
My problem was that the mouseup events are disabled on the page (and for that matter all elements) when the drag events trigger. I wanted to identify the target element when you drag from one shape onto another (hence the need for mouseup). To get around this I used the mouseover and mouseout to identify the element that the mouse is over and access that element in the drag end.
– afriedman111
Nov 20 '18 at 19:02
My problem was that the mouseup events are disabled on the page (and for that matter all elements) when the drag events trigger. I wanted to identify the target element when you drag from one shape onto another (hence the need for mouseup). To get around this I used the mouseover and mouseout to identify the element that the mouse is over and access that element in the drag end.
– afriedman111
Nov 20 '18 at 19:02
My problem was that the mouseup events are disabled on the page (and for that matter all elements) when the drag events trigger. I wanted to identify the target element when you drag from one shape onto another (hence the need for mouseup). To get around this I used the mouseover and mouseout to identify the element that the mouse is over and access that element in the drag end.
– afriedman111
Nov 20 '18 at 19:02
add a comment |
When you click on one element and drag to another, I wanted to detect what that second element is. Mouseup doesn't trigger when you drag an object, but mouseover and mouseout do. I used those functions to set a mouseover_obj variable. That way after you drag, when the drag end event executes, you can access that object. If it's not null, then its value that is the shape your mouse is over.
Here's some code:
JsFiddle for D3 Mouseup while Drag
var mouseover_node = null;
var svg = d3.select('body').append('svg').attr('width', 1000).attr('height', 1000);
var rect = svg.selectAll('rect')
.data([0, 2, 3])
.enter().append('rect')
.attr('x', function(x) { return +x * 0; })
.attr('y', function(y) { return +y * 120; })
.attr('width', function() { return 100; })
.attr('height', function() { return 100; })
.attr('fill', function(x) { if(x == 0){return'red';}else return 'blue'; });
rect.on("mouseover", (d) => {this.mouseover_node = d})
.on("mouseout", (d) => {this.mouseover_node = null})
.call(d3.drag()
.on("start", function () {
console.log('start');
return false;
})
.on("drag", function () {
console.log('drag');
})
.on("end", (sourceElement,index,svgItems) => {
console.log('end drag with mouseover: ' + this.mouseover_node);
})
);
answered Nov 20 '18 at 19:18
afriedman111afriedman111
7212
add a comment |
When you click on one element and drag to another, I wanted to detect what that second element is. Mouseup doesn't trigger when you drag an object, but mouseover and mouseout do. I used those functions to set a mouseover_obj variable. That way after you drag, when the drag end event executes, you can access that object. If it's not null, then its value that is the shape your mouse is over.
Here's some code:
JsFiddle for D3 Mouseup while Drag
var mouseover_node = null;
var svg = d3.select('body').append('svg').attr('width', 1000).attr('height', 1000);
var rect = svg.selectAll('rect')
.data([0, 2, 3])
.enter().append('rect')
.attr('x', function(x) { return +x * 0; })
.attr('y', function(y) { return +y * 120; })
.attr('width', function() { return 100; })
.attr('height', function() { return 100; })
.attr('fill', function(x) { if(x == 0){return'red';}else return 'blue'; });
rect.on("mouseover", (d) => {this.mouseover_node = d})
.on("mouseout", (d) => {this.mouseover_node = null})
.call(d3.drag()
.on("start", function () {
console.log('start');
return false;
})
.on("drag", function () {
console.log('drag');
})
.on("end", (sourceElement,index,svgItems) => {
console.log('end drag with mouseover: ' + this.mouseover_node);
})
);
answered Nov 20 '18 at 19:18
afriedman111afriedman111
7212
add a comment |
When you click on one element and drag to another, I wanted to detect what that second element is. Mouseup doesn't trigger when you drag an object, but mouseover and mouseout do. I used those functions to set a mouseover_obj variable. That way after you drag, when the drag end event executes, you can access that object. If it's not null, then its value that is the shape your mouse is over.
Here's some code:
JsFiddle for D3 Mouseup while Drag
var mouseover_node = null;
var svg = d3.select('body').append('svg').attr('width', 1000).attr('height', 1000);
var rect = svg.selectAll('rect')
.data([0, 2, 3])
.enter().append('rect')
.attr('x', function(x) { return +x * 0; })
.attr('y', function(y) { return +y * 120; })
.attr('width', function() { return 100; })
.attr('height', function() { return 100; })
.attr('fill', function(x) { if(x == 0){return'red';}else return 'blue'; });
rect.on("mouseover", (d) => {this.mouseover_node = d})
.on("mouseout", (d) => {this.mouseover_node = null})
.call(d3.drag()
.on("start", function () {
console.log('start');
return false;
})
.on("drag", function () {
console.log('drag');
})
.on("end", (sourceElement,index,svgItems) => {
console.log('end drag with mouseover: ' + this.mouseover_node);
})
);
answered Nov 20 '18 at 19:18
afriedman111afriedman111
7212
When you click on one element and drag to another, I wanted to detect what that second element is. Mouseup doesn't trigger when you drag an object, but mouseover and mouseout do. I used those functions to set a mouseover_obj variable. That way after you drag, when the drag end event executes, you can access that object. If it's not null, then its value that is the shape your mouse is over.
Here's some code:
JsFiddle for D3 Mouseup while Drag
var mouseover_node = null;
var svg = d3.select('body').append('svg').attr('width', 1000).attr('height', 1000);
var rect = svg.selectAll('rect')
.data([0, 2, 3])
.enter().append('rect')
.attr('x', function(x) { return +x * 0; })
.attr('y', function(y) { return +y * 120; })
.attr('width', function() { return 100; })
.attr('height', function() { return 100; })
.attr('fill', function(x) { if(x == 0){return'red';}else return 'blue'; });
rect.on("mouseover", (d) => {this.mouseover_node = d})
.on("mouseout", (d) => {this.mouseover_node = null})
.call(d3.drag()
.on("start", function () {
console.log('start');
return false;
})
.on("drag", function () {
console.log('drag');
})
.on("end", (sourceElement,index,svgItems) => {
console.log('end drag with mouseover: ' + this.mouseover_node);
})
);
answered Nov 20 '18 at 19:18
afriedman111afriedman111
7212
answered Nov 20 '18 at 19:18
afriedman111afriedman111
7212
answered Nov 20 '18 at 19:18
afriedman111afriedman111
7212
answered Nov 20 '18 at 19:18
afriedman111afriedman111
7212
7212
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53396051%2fd3-drag-and-mouseup-events%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
